Group options mouse bug?

[ewilloughby]

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

https://user-images.githubusercontent.com/4126936/159333536-0893cf14-3edc-4386-bb71-60c0537d8f53.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]

I‘m experiencing the same with group options

https://user-images.githubusercontent.com/39077/178917979-f5f7847d-abf7-434b-a375-bb9358d4cc22.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]

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]

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.