Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Group options mouse bug? #1517

Open
ewilloughby opened this issue Mar 21, 2022 · 3 comments
Open

Group options mouse bug? #1517

ewilloughby opened this issue Mar 21, 2022 · 3 comments

Comments

@ewilloughby
Copy link

ewilloughby commented Mar 21, 2022

Power Select Version - 5 (latest), Ember Versions Tested: 3.27, 4.2

When creating groups with collection options (built after the promises have resolved) and with search enabled, there seems to be a mouse select/hover bug. Keyboard input works well throughout, search works perfectly - but none of the options themselves are clickable unless the user first starts typing a search with keyboard. This seems to be a significant issue because the user cannot click the options in the dropdown, the intuitive first step they take. Can anyone else double-check me here? Am I missing something?

I threw up a barebones repo reproducing this and a screen recording as well: Repo with the bug

ember-select-mouse-issue.mov

Group option generated in manner from previous examples:
` options = this.fetchOptions();

@action
fetchOptions() {

var rentalOptions = this.store.peekAll('rental');

let groups = Ember.RSVP.all([rentalOptions]).then(([rentals]) => {
  return [
    {
      groupName: "Rentals",
      options: rentals
    }
  ];
});

return groups;

}`

Power Select in Template
`
<PowerSelect
@searchEnabled={{true}}
@options={{this.options}}
@selected={{this.title}}
@SEARCHFIELD={{"title"}}
@onchange={{this.renderSelection}}
@dropdownClass="policy-dropdown"
@allowClear={{true}}
@closeOnSelect={{true}}
@highlightOnHover={{true}}
as |thing|

{{thing.title}}
</PowerSelect>

{{yield}}
`

@andrewtimberlake
Copy link

andrewtimberlake commented Jul 14, 2022

I‘m experiencing the same with group options

CleanShot.2022-07-14.at.08.40.08.mp4

In controller

get templates() {
    return [
      {
        groupName: 'Letter Templates',
        options: this.store.peekAll('letter-template'),
      },
      {
        groupName: 'SMS Templates',
        options: this.store.peekAll('sms-template'),
      },
    ];
  }

In template

<PowerSelect
 @onChange={{fn this.setTemplate step}}
  @options={{this.templates}}
  @selected={{step.template}}
  @searchEnabled={{true}}
  @searchField="name"
  @matchTriggerWidth={{false}}
  class="text-sm max-w-32"
  as |template|
>
  {{template.name}}
</PowerSelect>

@andrewtimberlake
Copy link

This mouse bug went away when I transformed the RecordArray to an Array

get templates() {
    return [
      {
        groupName: 'Letter Templates',
        options: this.store.peekAll('letter-template').map(t => t),
      },
      {
        groupName: 'SMS Templates',
        options: this.store.peekAll('sms-template').map(t => t),
      },
    ];
  }

@IBue
Copy link

IBue commented Nov 15, 2023

ember-source 4.4
PowerSelect 7.1.2

I can confirm this behaviour when binding a RecordArray (findAll, peekAll) directly to @options (non-grouped case).
Slicing/Mapping to a native Array works fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants