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

Typeahead with show-hint enabled focuses wrong input field on label click #5926

Closed
grobgl opened this issue May 25, 2016 · 2 comments
Closed

Comments

@grobgl
Copy link

grobgl commented May 25, 2016

Bug description:

When using the typeahead component with the flag typeahead-show-hint set to true and a label, clicking on the label will focus the wrong input field (the one that is used to show the hint text). This is probably because the ID is passed to the wrong input field.

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/YPDrR76uEnXoyYO5F9pP?p=preview

Version of Angular, UIBS, and Bootstrap

Angular: v1.4.3
UIBS: v1.3.3
Bootstrap: v2.3.1

@icfantv
Copy link
Contributor

icfantv commented May 27, 2016

@grobgl, this is a good catch. the issue is that (and you can see this if you look at the generated HTML) there are two elements with the same id - which is a recipe for badness in a browser.

The culprit is this line where we clone the element but never change the ID, if present.

I played around with this for a bit in the chrome debugger and believe the fix simply to remove the ID (if present on the original) from the original element after it's been cloned - which would be a breaking change should anyone be relying on it.

@wesleycho, if this sounds like the right fix, I'll make a PR.

@wesleycho
Copy link
Contributor

I'm fine with that fix

@wesleycho wesleycho added this to the 2.0.0 milestone May 28, 2016
@wesleycho wesleycho mentioned this issue May 28, 2016
10 tasks
icfantv added a commit to icfantv/bootstrap that referenced this issue May 28, 2016
* remove any duplicate `id` attribute on the typeahead hint element if used on
  the original input element.

BREAKING CHANGE: This change removes the `id` attribute on the first `<input>`
element placed into the DOM when the `typeahead-show-hint` attribute is used
and there is an `id` attribute present on the original `uib-typeahead` element.
This could affect selectors if they are being used.

Fixes angular-ui#5926
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

3 participants