Twenty Nineteen: Keyboard menu showing with touch menu on Mobile

[laurelfulford]

Originally reported by @anevins in Twenty Nineteen's GitHub repo:

Mobile devices can trigger hover events as well as touch events and because of this, users can sometimes be shown both keyboard and touch menus in the same scenarios.

Context: ​https://wordpress.org/support/topic/header-menu-more-button-on-mobile/?view=all

Steps to replicate (either one of the following):

1. Press and hold the 3 dot button
2. Press the 3 dot button, then on the touch menu press + hold + drag down the "back" button

@kjellr added:

I'm able to reproduce this one iOS (but only on screens that have no featured image for some reason):

1. Press and hold on the button (in the case above, triggering a quick look)
2. Close the menu by hitting the back button
3. The desktop menu is visible

Original ticket here: ​https://github.com/WordPress/twentynineteen/issues/731

[laurelfulford]

Twenty Nineteen - duplicate navigation 1

[laurelfulford]

Twenty Nineteen - duplicate navigation 2

[laurelfulford]

I'm having a hard time recreating this as described, but I might be doing it incorrectly, or an unrelated theme update may have changed this behaviour.

On my iPhone 6, I've tried:

1. Pressing and holding the ... button. This opens the menu as expected (this is not triggering a 'quick look' for me).
2. Closing the menu with the 'Back' button.

Occasionally I can catch the desktop menu flashing briefly very briefly when I tap 'Back', or, if I keep my finger on the screen after tapping the 'Back' button, the desktop menu will remain visible until I lift my finger. But it doesn't seem to 'stick' on its own.

@anevins or @kjellr can either of you still recreate this issue to the extent that is shown in the gifs above? I want to make sure I'm not missing something. Thanks!

[kjellr]

@laurelfulford I think you're right — I'm unable to reproduce now as well. My guess is that this sorted itself out when we changed the ellipsis and back buttons into actual buttons (#45713).

I can see a longer flash of the desktop menu when I hold/drag the "Back" button a little bit longer than usual, but it fades away automatically. I think this can be closed for now, though maybe we want to open a new issue for the slight flash of the desktop menu? I wonder if that can be improved somewhat.

[laurelfulford]

Thanks for testing, @kjellr!

... maybe we want to open a new issue for the slight flash of the desktop menu? I wonder if that can be improved somewhat.

Good call! I've created #46158 to explore this further.