search

angular-ui / ui-select

AngularJS-native version of Select2 and Selectize
MIT License
3.26k stars 1.81k forks source link

Feature: Apply "focused" class to multiselect, when tabbing into internal input of multiselect #1923

Open Klinton90 opened 7 years ago

Klinton90 commented 7 years ago

Usecase: when multiselect is on page and user hover over it -> blue outline border is shown (at least for bootstrap theme). However, when use "Tab" key to enter the field -> nothing is highlighted. There is no good way to apply custom styling on focus in this case (no css :has(#child_id:focus) selector). Possible workaround could be adding custom class to ui-select-bootstrap div, like it is done for single mode (<div class="ui-select-match"> receives btn-default-focus class, when focused with "Tab" key or "focusser").

Jefiozie commented 7 years ago

Hi,

As described in the issue template we would like to have a full description with plunker and version. In the case we can have a look at the issue and reproduce the issue much quicker.

Please update your issue as requested in the issue template.

The issues forum is NOT for support requests. It is for bugs and feature requests only. Please read https://github.com/angular-ui/ui-select/blob/master/CONTRIBUTING.md and search existing issues (both open and closed) prior to opening any new issue and ensure you follow the instructions therein.

Bug description:

Link to minimally-working plunker that reproduces the issue:

Version of Angular, UI-Select, and Bootstrap/Select2/Selectize CSS

Angular: UI-Select: Bootstrap/Select2/Selectize CSS (if applicable):

Thanks :smile:

Klinton90 commented 7 years ago

Plunkr: http://plnkr.co/edit/tDAbjtgBRNShHP5WWKIA?p=preview

Hover mouse on field - it will be highlighted. Now focus field with "Tab" key -> nothing is highlighted. There is no way to apply custom styling to .ui-select-multiple. Focus is applied to internal input. As example, I added black border to it. Nothing else is changed in ui-select's state... Only workaround I can guess: add global event listner (via jQuery/JQLite) to check if internal input is focused.

Same with autofocus directive.