Skip to content
This repository has been archived by the owner on Oct 2, 2019. It is now read-only.

search-enabled=false breaks keyboard interaction on Safari #2005

Open
kevcenteno opened this issue Jun 2, 2017 · 7 comments
Open

search-enabled=false breaks keyboard interaction on Safari #2005

kevcenteno opened this issue Jun 2, 2017 · 7 comments

Comments

@kevcenteno
Copy link

Bug description:

Steps to reproduce

  1. Set search-enabled=false
  2. Use desktop Safari (tested on 10.1.1)
  3. Click/tab/focus on the ui-select element
  4. Use up/down arrow keys to change what is selected.

Expected

  1. Can change what is selected when dropdown is open
  2. Can open dropdown when dropdown is closed

Actual

  1. Cannot change what is selected
  2. Dropdown panel quickly opens and closes.

Link to minimally-working plunker that reproduces the issue:

http://angular-ui.github.io/ui-select/demo-disable-search.html

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

UI-Select

Angular: ^1.4

UI-Select: 0.19.8

Bootstrap/Select2/Selectize CSS (if applicable): All

@Jefiozie Jefiozie self-assigned this Jun 5, 2017
@daerogami
Copy link

I'm not sure this is limited to Safari.
Also, it looks like this has been a long standing issue. I've found more than one issue that revolves around search-enabled=false and keyboard interaction being unreliable.
#375 was the issue I found that was supposedly fixed in PR #1717
I am using Angular v1.4.4 with ui-select v0.19.7 (updated from v0.11.1 hoping that would fix my issue)
Cannot use keyboard to shortcut to items in the list in Chrome or FF (other browsers untested).

@Jefiozie
Copy link
Contributor

Jefiozie commented Oct 6, 2017

I try this one but I cannot reproduce it. (with angular 1.4.4 tested and latest ui-select)
Attempt 1:

  1. Disabled search
  2. tab to next ui-select
  3. enter to open select
  4. pressed a couple of times on up/down keys
  5. enter to select a item
  6. tabbed to the next ui-select

Attempt 2:

  1. Disabled search
  2. tab to next ui-select
  3. pressed down to open select
  4. pressed a couple of times on up/down keys
  5. enter to select a item
  6. tabbed to the next ui-select

Probably i'm doing something wrong though 😃

@Jefiozie Jefiozie removed their assignment Oct 6, 2017
@daerogami
Copy link

@Jefiozie What about using character navigation? Intuition leads me to believe pressing "T" should take you to the first item in the list that starts with "T".

@Jefiozie
Copy link
Contributor

Ah that is what I was missing now I see what you mean.
If search-enabled=false and you press a key for example: A it should select the first item in the list with the A correct?

@daerogami
Copy link

If search-enabled=false and you press a key for example: A it should select the first item in the list with the A correct?

@Jefiozie That is correct. I'm unfamiliar with the code for this plugin, but let me know if there's anything I can do to get some momentum on getting this solved.

@cserkaran
Copy link

While testing in chrome, the keyboard navigation works with this fix, but a weird search box has started to appear even when search-enabled is set to false. Also the size of search box (when search-enabled is true) is larger than what is used to be..
error
searchbox xtyle

@dharitdesai
Copy link

same issue. not totally sure about the whole code. but after putting some breakpoints around, I finally figured that this lime is closing the dropdown again in uiSelectController.js's ctrl.activate function at line 167
else if (ctrl.open && !ctrl.searchEnabled) { // Close the selection if we don't have search enabled, and we click on the select again ctrl.close(); }
this is being called from ctrl.toggle($event) from template at
<i class="caret pull-right" ng-click="$select.toggle($event)" role="button" tabindex="0"></i>

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

No branches or pull requests

5 participants