fix: resolve dropdown menu disappearing for #11410 #11411
Conversation
|
Thank you @arloduff! I'll take a look at this. |
|
Thanks @ncoden! Appreciate it! |
js/foundation.dropdownMenu.js
Outdated
|
|
||
| clearTimeout($elem.data('_delay')); | ||
| $elem.data('_delay', setTimeout(function() { | ||
| // Check for hovering over input dropdown options |
There was a problem hiding this comment.
@ncoden It seems placing this check in the setTimeout rather than where I had it before resolves the issue of the dropdown staying open on Firefox when the user uses the keyboard to navigate to another window. The only issue I've found of it still staying open on Firefox with this change is if the user is already hovered over the input suggestions and then uses the keyboard to navigate to another window. But I wouldn't consider that a breaking change, since currently, the dropdown disappears if the user is hovered over one of those suggestions. I'm going to update the PR accordingly.
ncoden
force-pushed
the
fix/check-for-null-related-target
branch
from
ec60015 to
ae8fa2d
Compare
|
Hi @arloduff. I cleaned this a bit and added some comments. I'll check if there is the same bug on others components. |
js/foundation.dropdownMenu.js
Outdated
|
|
||
| // Ignore "magic mouseleave": when the mouse simply disapear from the document | ||
| // (like when entering in browser input suggestions See https://git.io/zf-11410), | ||
| // unless we actually leaved the window (and document lost focus). |
There was a problem hiding this comment.
Thanks 👍 I think you mean to say unless we actually left the window here, but otherwise, looks good.
|
[Compatible with v6.5.0] |
…lated-target for v6.5.0 ac88dac fix: resolve dropdown menu disappearing for foundation#11410 ae8fa2d fix: move relatedTarget null check to setTimeout for foundation#11410 a25180c style: improve dropdown hiding event readability in dropdownMenu e46ddd1 docs: improve description of foundation#11410 bug fix in dropdownMenu ebc4be7 docs: fix typo in bug description in dropdownMenu Co-Authored-By: Nicolas Coden <nicolas@ncoden.fr> Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>
Description
Currently, if a dropdown menu contains an input field which displays suggestions to select from a dropdown (such as an email input on Chrome), the mouseleave event is triggered if the user hovers over one of the choices, causing the entire dropdown to disappear. This adds a check for the case of
e.relatedTarget === nullwhich will be the case when one of the input options is hovered over, but not when the mouse leaves through another event.Motivation and Context
Allows users to choose an input option when their dropdown menu contains an input without the entire dropdown disappearing, which can be a bad user experience.
Types of changes
Dropdowns containing input fields that offer suggestions will now stay open long enough for the user to choose one. I have found one bug with this change, which is that in Firefox, if a user hovers over one of the input suggestions and then uses the keyboard to navigate to a different window, the dropdown will remain open. The dropdown will auto close again once focus is returned to the browser window, but will remain open until then. However, since current functionality is for the dropdown to disappear when one of those suggestions is hovered over, I wouldn't consider this change to break existing functionality.
functionality to change)
Checklist (all required):
developordevelop-v...).