Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input losing focus when wrapped into label #957

Open
ebi opened this issue Aug 20, 2014 · 13 comments
Open

Input losing focus when wrapped into label #957

ebi opened this issue Aug 20, 2014 · 13 comments

Comments

@ebi
Copy link

ebi commented Aug 20, 2014

Observed on Firefox 31 if the input that gets enhanced with typeahead is wrapped into a <label> tag it will focus and blur again right away.

@jharding
Copy link
Contributor

Would you mind creating a jsbin or a jsfiddle? Just want to make sure I have a full understanding of the problem.

@ebi
Copy link
Author

ebi commented Aug 21, 2014

Sure just took the first example to initialize typeahead.js http://jsfiddle.net/ebii/adw3w3y1/5/

@ebi
Copy link
Author

ebi commented Aug 21, 2014

btw. the same behaviour worked before commit be9114d

@jharding
Copy link
Contributor

Are you sure that commit broke it? The problem seems to stem from the fact that the hint element is inserted before the typeahead input, so when you click on the label, it'll try to focus on the hint, not the typeahead input.

@ebi
Copy link
Author

ebi commented Aug 24, 2014

Yes I'm pretty sure. I didn't try on the fiddle but bisected through the commits in my actual project, where it only started to happen after that commit.

@jpzwarte
Copy link

jpzwarte commented Sep 1, 2014

I've noticed the same thing here. Setting hint to false stops the input from losing focus immediately.

@zorkleplex
Copy link

+1 on FF 31 and FF 32.0.3 Chrome not having an issue. I set hint: false to work around.

@rgm
Copy link

rgm commented Apr 23, 2015

My workaround is to back out be9114d after setting up the typeahead. That commit seems to be an IE8/IE9 fix and luckily we're not supporting those:

// do typeahead setup, etc., to get it in the DOM, then
var $hint = $("scope>to>typeahead>input.tt-hint");
$hint
  .prop("readonly", false)
  .prop("disabled", true);

Thanks @ebi for the detective work. Nice find.

@rgm
Copy link

rgm commented Apr 23, 2015

(Just cross-referencing #839 since that seems to be the rationale for the be9114d change).

@user24
Copy link

user24 commented May 29, 2015

Same occurs on iPad. jsbin demo: http://jsbin.com/pejuvajeqi/1/edit?html,js,console,output

Keyboard doesn't pop up when wrapped in label.

@einfallstoll
Copy link

Sad that this hasn't been fixed.

@user24
Copy link

user24 commented Feb 17, 2016

Sad that I still haven't shipped the project I was working on last May when I made the comment above yours.

@SantzDesign
Copy link

Unbelievable there's a bug like this! Drove me crazy for at least half an hour. 2014 when the issue has 1st been raised, still no fix? Sad.

To date, still broken, using Safari 11.0 (12604.1.38.1.7) on macOS Sierra (10.12.6).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

8 participants