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.

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

Dropdown with "hover" trigger incorrectly rendered on mobile devices #3961

Closed
glumb opened this issue Jan 3, 2024 · 12 comments · Fixed by #3962
Closed

Dropdown with "hover" trigger incorrectly rendered on mobile devices #3961

glumb opened this issue Jan 3, 2024 · 12 comments · Fixed by #3962
Assignees
@kikuomax
Labels
bug

Comments

@glumb
Copy link

glumb commented Jan 3, 2024

Overview of the problem

Buefy version: v0.9.27
Vuejs version: 2.7.15
OS/Browser: MacOs/Chrome

Description

The Dropdown does not render correctly in mobile view, when trigger 'hover' is set.
image

Steps to reproduce

  1. visit https://buefy.org/documentation/dropdown on smartphone or desktop browser mobile emulation
  2. tap "Hover me!"
  3. see incorrect position and no background

Expected behavior

Behave like the "Click me!" tiggered button

Actual behavior
@kikuomax kikuomax added the bug label Jan 3, 2024
@kikuomax kikuomax self-assigned this Jan 4, 2024
kikuomax added a commit to kikuomax/buefy that referenced this issue Jan 4, 2024
@kikuomax
fix(lib): dislodged hoverable dropdown on mobile screen
444821f 
- Fixes the issue that the contents of a hoverable `BDropdown` was
  displayed at a wrong position on a mobile (narrow) screen. Cancels the
  effect of `.is-hoverable` if the screen is narrow.

  One drawback is that the dropdown won't be displayed on mobile screen
  unless triggers other than "hover" are enabled. But this should not
  matter on actual mobile (touch) devices because "hover" won't work on
  such devices anyway.

  Another drawback is that if "click" trigger is combined with "hover",
  the dropdown contents won't be closed by moving the pointer out of
  the trigger once users click on the trigger. This might confuse the
  users.

issue buefy#3961
kikuomax added a commit to kikuomax/buefy that referenced this issue Jan 4, 2024
@kikuomax
feat(docs): add click trigger to dropdown with hover
461eab3 
- Adds "click" trigger to the dropdown with "hover" trigger in
  `ExSimple` example of `BDropdown`. This is done to see the effect of
  the fix for buefy#3961.
@kikuomax kikuomax mentioned this issue Jan 4, 2024
Merged
@kikuomax
Copy link
Collaborator

kikuomax commented Jan 4, 2024

@glumb @wesdevpro You can test the new behavior here: https://deploy-preview-3962--buefy-org.netlify.app/

There are two drawbacks:

  1. The dropdown won't be displayed on mobile screen unless triggers other than "hover" are enabled. But this should not matter on actual mobile (touch) devices because "hover" won't work on such devices anyway.
  2. If "click" trigger is combined with "hover", the dropdown contents won't be closed by moving the pointer out of the trigger once users click on the trigger. This might confuse the users.

@kikuomax
Copy link
Collaborator

kikuomax commented Jan 4, 2024

@wesdevpro Hover is suppressed if the screen is narrower than 1024px ($dropdown-mobile-breakpoint = $desktop).

kikuomax added a commit to kikuomax/buefy that referenced this issue Jan 4, 2024
@kikuomax
feat(docs): add hints for dropdown with hover
b1ab7cb 
- Adds an explanation that "hover" trigger of `BDropdown` is suppressed
  on a mobile screen, and the hint to change the default behavior. This
  is intended to answer the following comment:
    - buefy#3961 (comment)
@kikuomax
Copy link
Collaborator

kikuomax commented Jan 4, 2024

@wesdevpro I have added a hint:
image

@wesdevpro
Copy link
Member

wesdevpro commented Jan 4, 2024 •
edited

2. If "click" trigger is combined with "hover", the dropdown contents won't be closed by moving the pointer out of the trigger once users click on the trigger. This might confuse the users.

In my opinion, making that note in the docs is sufficient enough to prevent downside number 2. Of course, this is assuming developers do not require the "click" trigger to be combined with "hover".

@kikuomax
Copy link
Collaborator

kikuomax commented Jan 4, 2024

@wesdevpro I found the explanations contradicting.
"Dropdowns with hoverable prop won't change its behavior" vs "Hover is suppressed on a mobile screen".

@wesdevpro
Copy link
Member

wesdevpro commented Jan 4, 2024 •
edited

"Dropdowns with hoverable prop won't change its behavior"

After reading that I agree the docs are contradicting 😅

@kikuomax
Copy link
Collaborator

kikuomax commented Jan 4, 2024

I started to think we should keep the original statement "Dropdowns with hoverable prop won't change its behavior". I will do some experiments around "touchstart" events to detect not only a narrow screen but actual mobile devices.

kikuomax added a commit to kikuomax/buefy that referenced this issue Jan 4, 2024
@kikuomax
fix(lib): dropdown with hover on narrow screen
d052a1b 
- Fixes the issue that `BDropdown` with "hover" trigger changed the
  behavior depending on the screen width; became modal on a narrow
  screen. The previous behavior contradicted the statement on the
  documentation "Dropdowns with "hover" trigger won't change it's
  behavior". See
  buefy#3961 (comment)
  I decided to keep the statement. However, hover events do not make
  sense on touch devices. So "hover" trigger works like "click" trigger
  on touch devices, and dropdown contents are shown in a modal.

  To detect actual touch devices, the trigger element of `BDropdown` now
  handles touch events: touchstart, touchmove, and touchend. The
  contents of `BDropdown` with "hover" trigger on a touch device pops up
  only when the trigger is tapped; i.e., at touchend immediately
  following touchstart. `BDropdown` bears `.is-touch-enabled` class if
  the trigger is tapped.

  Removes the CSS rules that cancels `.is-hoverable` on a narrow screen.
  The modal style is applied when the screen is narrow and:
    - `.is-hoverable` is disabled
    - or `.is-touch-enabled` is enabled

  "hover" trigger precedes "click" trigger in case both are enabled.
@wesdevpro
Copy link
Member

I started to think we should keep the original statement "Dropdowns with hoverable prop won't change its behavior". I will do some experiments around "touchstart" events to detect not only a narrow screen but actual mobile devices.

Sound slike a plan!

@kikuomax
Copy link
Collaborator

kikuomax commented Jan 5, 2024

@glumb @wesdevpro I have refined the behavior. Now "hover" trigger works differently on touch devices or non-touch devices (e.g., PC):

  • Touch devices: it works like "click" trigger. When the trigger is tapped, the dropdown contents pop up as a modal if the screen is narrow, otherwise show up under the trigger.
  • Non-touch devices (e.g., PC): it won't change behavior whether the screen is narrow or not. The dropdown contents show up under the trigger if the pointer is on the trigger.

Please check the behavior here: https://deploy-preview-3962--buefy-org.netlify.app/documentation/dropdown

kikuomax added a commit that referenced this issue Jan 10, 2024
@kikuomax @wesdevpro
Fix: Dropdown with "hover" trigger incorrectly rendered on mobile dev…
a18d039 
…ices (#3961) (#3962)

* fix(lib): dislodged hoverable dropdown on mobile screen

- Fixes the issue that the contents of a hoverable `BDropdown` was
  displayed at a wrong position on a mobile (narrow) screen.

  I initially thought to cancel the effect of `is-hoverable` on narrow
  screen whether it is on mobile devices or not. But it contradicted to
  the documentation of `Dropdown`, and I decided to keep the original
  statement about the behavior of "hover" trigger.
  #3961 (comment)  

  Since hover events do not make sense on touch devices. "hover"
  trigger now works like "click" trigger on touch devices, and dropdown
  contents are shown in a modal when the screen is narrow.
  To detect actual touch devices, the trigger element of `BDropdown` now
  handles touch events: touchstart, touchmove, and touchend. The
  contents of `BDropdown` with "hover" trigger on a touch device pops up
  only when the trigger is tapped; i.e., at touchend immediately
  following touchstart. `BDropdown` bears `.is-touch-enabled` class if
  the trigger is tapped.
  The modal style is applied when the screen is narrow and:
    - `.is-hoverable` is disabled
    - or `.is-touch-enabled` is enabled

  The `:hover` state is only applied if touch is not enabled
  (`:not(.is-touch-enabled)`).
  Delays to reset `isTouchEnabled` to avoid glitches; I observed a ghost
  of the dropdown menu under the trigger on a touch device.
  I avoided `@media (hover: hover)` condition for the `:hover` state, because
  it might cause problems on 2-in-1 devices:
  #3962 (comment)

  "hover" trigger precedes "click" trigger in case both are enabled.

* feat(docs): dropdown "hover" behavior on touch devices

- `ExSimple` example of `BDropdown` explains the new behavior of
  `BDropdown` with "hover" trigger on touch devices.

---------

Co-authored-by: Wesley Ford <[email protected]>
@glumb
Copy link
Author

glumb commented Jan 12, 2024 •
edited

Any ETA when this will be live? :)
BTW thanks so much for fixing this so quickly 👍

@wesdevpro
Copy link
Member

Any ETA when this will be live? :) BTW thanks so much for fixing this so quickly 👍

When we publish the next and final release from the Core Team for Buefy V2(maybe this week or next week). See #3874

@wesdevpro
Copy link
Member

Any ETA when this will be live? :) BTW thanks so much for fixing this so quickly 👍

When we publish the next and final release from the Core Team for Buefy V2(maybe this week or next week). See #3874

There are also a few working parts we need to get done to prepare to move Buefy-next here

kikuomax added a commit that referenced this issue Feb 9, 2024
@kikuomax @wesdevpro
Fix: Dropdown with "hover" trigger incorrectly rendered on mobile dev…
b0555ad 
…ices (#3961) (#3962)

* fix(lib): dislodged hoverable dropdown on mobile screen

- Fixes the issue that the contents of a hoverable `BDropdown` was
  displayed at a wrong position on a mobile (narrow) screen.

  I initially thought to cancel the effect of `is-hoverable` on narrow
  screen whether it is on mobile devices or not. But it contradicted to
  the documentation of `Dropdown`, and I decided to keep the original
  statement about the behavior of "hover" trigger.
  #3961 (comment)  

  Since hover events do not make sense on touch devices. "hover"
  trigger now works like "click" trigger on touch devices, and dropdown
  contents are shown in a modal when the screen is narrow.
  To detect actual touch devices, the trigger element of `BDropdown` now
  handles touch events: touchstart, touchmove, and touchend. The
  contents of `BDropdown` with "hover" trigger on a touch device pops up
  only when the trigger is tapped; i.e., at touchend immediately
  following touchstart. `BDropdown` bears `.is-touch-enabled` class if
  the trigger is tapped.
  The modal style is applied when the screen is narrow and:
    - `.is-hoverable` is disabled
    - or `.is-touch-enabled` is enabled

  The `:hover` state is only applied if touch is not enabled
  (`:not(.is-touch-enabled)`).
  Delays to reset `isTouchEnabled` to avoid glitches; I observed a ghost
  of the dropdown menu under the trigger on a touch device.
  I avoided `@media (hover: hover)` condition for the `:hover` state, because
  it might cause problems on 2-in-1 devices:
  #3962 (comment)

  "hover" trigger precedes "click" trigger in case both are enabled.

* feat(docs): dropdown "hover" behavior on touch devices

- `ExSimple` example of `BDropdown` explains the new behavior of
  `BDropdown` with "hover" trigger on touch devices.

---------

Co-authored-by: Wesley Ford <[email protected]>
@kikuomax kikuomax mentioned this issue Feb 10, 2024
Closed
64 tasks
kikuomax added a commit to kikuomax/buefy that referenced this issue Feb 11, 2024
@kikuomax @wesdevpro
Fix: Dropdown with "hover" trigger incorrectly rendered on mobile dev…
732dd5f 
…ices (buefy#3961) (buefy#3962)

* fix(lib): dislodged hoverable dropdown on mobile screen

- Fixes the issue that the contents of a hoverable `BDropdown` was
  displayed at a wrong position on a mobile (narrow) screen.

  I initially thought to cancel the effect of `is-hoverable` on narrow
  screen whether it is on mobile devices or not. But it contradicted to
  the documentation of `Dropdown`, and I decided to keep the original
  statement about the behavior of "hover" trigger.
  buefy#3961 (comment)

  Since hover events do not make sense on touch devices. "hover"
  trigger now works like "click" trigger on touch devices, and dropdown
  contents are shown in a modal when the screen is narrow.
  To detect actual touch devices, the trigger element of `BDropdown` now
  handles touch events: touchstart, touchmove, and touchend. The
  contents of `BDropdown` with "hover" trigger on a touch device pops up
  only when the trigger is tapped; i.e., at touchend immediately
  following touchstart. `BDropdown` bears `.is-touch-enabled` class if
  the trigger is tapped.
  The modal style is applied when the screen is narrow and:
    - `.is-hoverable` is disabled
    - or `.is-touch-enabled` is enabled

  The `:hover` state is only applied if touch is not enabled
  (`:not(.is-touch-enabled)`).
  Delays to reset `isTouchEnabled` to avoid glitches; I observed a ghost
  of the dropdown menu under the trigger on a touch device.
  I avoided `@media (hover: hover)` condition for the `:hover` state, because
  it might cause problems on 2-in-1 devices:
  buefy#3962 (comment)

  "hover" trigger precedes "click" trigger in case both are enabled.

* feat(docs): dropdown "hover" behavior on touch devices

- `ExSimple` example of `BDropdown` explains the new behavior of
  `BDropdown` with "hover" trigger on touch devices.

---------

Co-authored-by: Wesley Ford <[email protected]>
kikuomax added a commit to ntohq/buefy-next that referenced this issue Feb 12, 2024
@kikuomax @wesdevpro
Fix: Dropdown with "hover" trigger incorrectly rendered on mobile dev…
f53bda4 
…ices (buefy#3961) (buefy#3962)

* fix(lib): dislodged hoverable dropdown on mobile screen

- Fixes the issue that the contents of a hoverable `BDropdown` was
  displayed at a wrong position on a mobile (narrow) screen.

  I initially thought to cancel the effect of `is-hoverable` on narrow
  screen whether it is on mobile devices or not. But it contradicted to
  the documentation of `Dropdown`, and I decided to keep the original
  statement about the behavior of "hover" trigger.
  buefy#3961 (comment)

  Since hover events do not make sense on touch devices. "hover"
  trigger now works like "click" trigger on touch devices, and dropdown
  contents are shown in a modal when the screen is narrow.
  To detect actual touch devices, the trigger element of `BDropdown` now
  handles touch events: touchstart, touchmove, and touchend. The
  contents of `BDropdown` with "hover" trigger on a touch device pops up
  only when the trigger is tapped; i.e., at touchend immediately
  following touchstart. `BDropdown` bears `.is-touch-enabled` class if
  the trigger is tapped.
  The modal style is applied when the screen is narrow and:
    - `.is-hoverable` is disabled
    - or `.is-touch-enabled` is enabled

  The `:hover` state is only applied if touch is not enabled
  (`:not(.is-touch-enabled)`).
  Delays to reset `isTouchEnabled` to avoid glitches; I observed a ghost
  of the dropdown menu under the trigger on a touch device.
  I avoided `@media (hover: hover)` condition for the `:hover` state, because
  it might cause problems on 2-in-1 devices:
  buefy#3962 (comment)

  "hover" trigger precedes "click" trigger in case both are enabled.

* feat(docs): dropdown "hover" behavior on touch devices

- `ExSimple` example of `BDropdown` explains the new behavior of
  `BDropdown` with "hover" trigger on touch devices.

---------

Co-authored-by: Wesley Ford <[email protected]>
@themodernpk themodernpk mentioned this issue Mar 19, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kikuomax kikuomax

Labels
bug
Projects
Buefy V2 Maintenance Board
Status: Completed ✅
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: Dropdown with "hover" trigger incorrectly rendered on mobile devices (#3961) kikuomax/buefy
3 participants
@glumb @kikuomax @wesdevpro