Skip to content

hashtag autocomplete: close menu on blur #2

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.

Sign up for GitHub

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

Jump to bottom
Closed
ryanflorence opened this issue Mar 28, 2014 · 1 comment
Closed

hashtag autocomplete: close menu on blur #2

ryanflorence opened this issue Mar 28, 2014 · 1 comment

Comments

@ryanflorence
Copy link

Currently the twitter hashtag popover stays open even when the input is blurred. I've implemented a solid menu blur by:

  1. focusing the menu when the user starts navigating (will need set tabindex=-1 for this)
  2. adding blur handlers to the input and the menu
  3. in the handler determine if document.activeElement is the either the input, the menu, or a child of the menu
  4. if not, close the menu

You can't do a typical "outerclick" because:

  1. that doesn't handle keyboard navigation (tab away from the input)
  2. <select> tags don't propogate events up to the body.
@ryanflorence ryanflorence changed the title close menu on blur hashtag autocomplete: close menu on blur Mar 28, 2014
@michaelbromley
Copy link
Owner

Thanks for the pointers. Wow that's a surprisingly tricky issue for something that seems so simple!

I picked up a few tips (such as tabindex="-1") from your comment, but had trouble implementing your suggestion because I could not get the document.activeElement to be anything other than the <body>. Maybe that's because I just use an <ul> for my popover list rather than a <select>?

In the end I achieved what seems to be a working result by setting mouseover and mouseout handlers on the popover div, which set a mouseIsOverSuggestions flag to true and false respectively.

Then the blur handler on the input checks this flag before hiding the popover.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ryanflorence @michaelbromley