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

Looses field focus after selecting an entry #46

Closed
mattiash opened this issue Apr 4, 2014 · 6 comments
Closed

Looses field focus after selecting an entry #46

mattiash opened this issue Apr 4, 2014 · 6 comments
Labels
type: bug

Comments

@mattiash
Copy link

mattiash commented Apr 4, 2014

ui-select with the bootstrap theme does not handle focus() properly. After the user selects an entry from the dropdown by pressing Enter, keyboard focus is lost (I think that focus is moved to the element). The problem can be seen in the following plunkr:

http://plnkr.co/edit/FZ6xHJHLhmyIxLKS4mAK?p=preview
mattiash added a commit to mattiash/ui-select that referenced this issue Apr 4, 2014
@mattiash
Retain keyboard focus after closing the dropdown.
59a7577 
Fixes angular-ui#46.
@mattiash mattiash mentioned this issue Apr 4, 2014
Closed
@mattiash
Copy link
Author

mattiash commented Apr 4, 2014

A plunkr with the fix in place: http://plnkr.co/edit/B0B9kp1HesTspXo2l3jO?p=preview

mattiash added a commit to mattiash/ui-select that referenced this issue Apr 7, 2014
@mattiash
Retain keyboard focus after closing the dropdown
7c490b2 
Fixes angular-ui#46.

The fix does two things. First, it actively sets focus
back to the button after closing the dropdown. To do this,
it uses $timeout with a zero timeout value to give angular
time to show the button before changing focus to it.
This is the same as was done previously when showing the dropdown.

There is however a second problem: bootstrap defines a
transition for form_control. This means that it takes some
time before the button is shown. This means that when the
timeout fires and focus() is called, the button is still
hidden and thus cannot be focused.

To work around the second problem, we can either use a
slightly longer timeout (a few 100ms), or we can disable the
transitions. I have chosen to disable the transitions, since
the timeout feels "ugly". This is done in the patch to select.css.
@mattiash
Copy link
Author

mattiash commented Apr 7, 2014

I now have a proper patch as shown above. To avoid opening one more issue, I will not open yet another pull request...

@tkrotoff
Copy link
Contributor

The pull request is already closed, you need to open a new one.
You could have rewritten your Git repository history to avoid creating another pull request.

Anyway, it's a nice patch!
Works fine under IE8, 11, Firefox 3.6, 27 and Chrome.
I've checked the behaviour of select, Select2, Selectize and Chosen: select, Select2 and Choosen keep the focus after an item being selected, Selectize does not.

The CSS also fixes the focus for activate() - open the dropdown.

@tkrotoff tkrotoff added the bug label Apr 11, 2014
@tkrotoff
Copy link
Contributor

I've created a branch to experiment on this: https://github.com/angular-ui/ui-select/compare/fix-focus

@dimirc
Copy link
Contributor

dimirc commented Jul 1, 2014

I created a plunker with a new version of the control that is currently at PR #92 which corrects some focus problems and looks that this issue will be solved too with that merge

@dimirc dimirc closed this as completed Aug 1, 2014
@iberodev
Copy link

iberodev commented Mar 1, 2016

I am experiencing the same issue with angular 1.5.0 and angular-ui-select 0.14.9 although I cannot reproduce it in a basic example
http://plnkr.co/edit/Qt1KJflr9Eh9wMBVfpGT?p=preview
so it must have some conflict with some of my other libraries but I still haven't found which one!

Any clue by any chance on which one might be likely to conflict as per past experience?

    "angular": "1.5.0",
    "bootstrap-sass-official": "3.3.6",
    "angular-bootstrap": "1.2.1",
    "angular-mocks": "1.5.0",
    "angular-route": "1.5.0",
    "angular-sanitize": "1.5.0",
    "angular-animate": "1.5.0",
    "angular-messages": "1.5.0",
    "angular-ui-router": "0.2.18",
    "angular-ui-select": "0.14.9",
    "angular-toastr": "1.7.0",
    "font-awesome": "~4.5.0",
    "Hover": "~2.0.2",
    "oidc-token-manager": "^1.0.1",
    "restangular": "1.5.1",
    "lodash": "1.3.0",
    "ag-grid": "3.2.0"

@iberodev iberodev mentioned this issue Mar 1, 2016
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
type: bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Retain keyboard focus after closing the dropdown. mattiash/ui-select
4 participants
@mattiash @tkrotoff @dimirc @iberodev