search

bithost-gmbh / ngx-mat-select-search

Angular component providing an input field for searching / filtering MatSelect options of the Angular Material library.
MIT License
642 stars 131 forks source link

[BUG] Blocked aria-hidden on a <input> element when opening the dropdown for the first time. #474

Closed AleixFerreCP closed 2 weeks ago

AleixFerreCP commented 1 month ago

Describe the bug

Only the first time you open the dropdown, the console shows an error. See the logs for the full detailed error.

To Reproduce

  1. Go to the template
  2. Open the console (from the browser, not the stackblitz console)
  3. Click to open the dropdown
  4. See the error appearing only the first time you open the dropdown. It does not appear later even if you change the values selected.

Expected behavior

This error should not appear on the console and it should be accessible by default.

Screenshots

https://github.com/user-attachments/assets/ccd05885-872f-4b49-830c-a632d3c39aab

Desktop (please complete the following information):

Smartphone (please complete the following information): Not tested

macjohnny commented 1 month ago

@AleixFerreCP thanks for reporting! do you want to fix it?

AleixFerreCP commented 1 month ago

@AleixFerreCP thanks for reporting! do you want to fix it?

I can't fix it myself right now, but I'd appreciate it if you could take a look when you can.

macjohnny commented 1 month ago

The problem is this line:

https://github.com/bithost-gmbh/ngx-mat-select-search/blob/443195f54288c61bdf58aecd4c810b647d32c120/src/app/mat-select-search/mat-select-search.component.ts#L288

however, this is needed to avoid the mat-option from being announced as an option, see https://github.com/bithost-gmbh/ngx-mat-select-search/pull/392. not sure whats the best way to solve this

AleixFerreCP commented 1 month ago

You can try to set the role of it to presentation. Although I did not test it, I think this could work.

 this.matOption._getHostElement().setAttribute('role', 'presentation');
macjohnny commented 1 month ago

You can try to set the role of it to presentation. Although I did not test it, I think this could work.

 this.matOption._getHostElement().setAttribute('role', 'presentation');

That sounds like a good suggestion! @escheiermann @AleixFerreCP would you be able to test this?

AleixFerreCP commented 2 weeks ago

Yesterday, I published a simple PR to fix this issue. Can you check it out, please?

macjohnny commented 2 weeks ago

Released in v7.0.7