fix(dropdown): rework touch input handling #2331
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Instead of distinguishing between touch and non-touch devices and binding to different events, we always bind to mouse events. For touch input, we mostly rely on the mouse event emulation (esp. click and mouseenter events) of modern browsers. This fixes fomantic#1989
Before this fix, nested sub-menus/dropdowns with more than two menu layers would not hide correctly when moving the mouse cursor from one menu directly to a "grand-parent" or higher menu (e.g. from the most inner to the most outer menu in a three layer menu).
…ction Some browsers seem to trigger mouse leave events only when moving the mouse cursor. I noticed that on mobile browsers, especially when using the touch screen. This somehow causes the submenus to stay visible even when the root menu is hidden (e.g. due to clicking/selecting a menu item). Thus, this commit forces hiding of all nested submenus, when hiding a menu.
auto-assign
bot
requested review from
ColinFrick,
exoego,
y0hami,
ko2in,
lubber-de and
prudho
lubber-de
added
type/bug
lubber-de
approved these changes
May 1, 2022
lubber-de
changed the title
lubber-de
removed
the
state/awaiting-reviews
lubber-de
added a commit
that referenced
this pull request
Jun 11, 2023
When a dropdown hides, the transition gets called twice messing up with upward menus and underlaying menu transparency. This is because submenu hiding needs to be called separately (invented by #2331 ) , but in case a select is used the submenu is the dropdown itself, so it should not be (hide) animated again when it is already (hide) animating
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR fixes #1989 in a similar way as my previous PR for the slider (#2327): First, I removed all special event handling for touch events and the whole distiction between touch- and non-touch devices, so mouse events will be handled on touch devices as well. Then, I added only a few touch event bindings for the things that don't work via mouse event emulation of the mobile web browsers.
In addition, I fixed two minor bugs with nested submenus being not correctly hidden in some cases (see commit messages for more details).
I tested everything on
Testcase
Screenshot (if possible)
(looks the same as before)
Closes