Responsive Dropdown activates links below #45

evengene · 2020-12-09T17:23:32Z

Hello,

As you can see on a video below, when I click About > Our Team - it clicks the other menu below which is Help Center. When clicking About > Media - it clicks on a button below the dropdown opening a link.
It seems as if the dropdown has a lower priority or as if it is not visible.

If there are no links/content below the dropdown - it work perfect and goes to according links.

Do you think you can help me with that?
Thank you so much!

jedwards1211 · 2020-12-09T19:10:43Z

These are hover menus right? I'll try to add a case to the demos like this to debug it

evengene · 2020-12-09T20:50:06Z

yes, they are hover menus thank you so much!

…

On Wed, Dec 9, 2020 at 12:10 PM Andy Edwards ***@***.***> wrote: These are hover menus right? I'll try to add a case to the demos like this to debug it — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#45 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACB3P3YLP6T5HPZX57JWDQ3ST7DUFANCNFSM4UTZYOYQ> .

-- Elina Shelest

jedwards1211 · 2020-12-09T21:39:28Z

Hmmm, I tried to reproduce with the code below but I can't yet, at least not macOS or my Android phone. I have an old iPhone I can pull out and charge up and try with. Can you post your code that's rendering the menus?

import * as React from 'react'
import Menu from 'material-ui-popup-state/HoverMenu'
import MenuItem from '@material-ui/core/MenuItem'
import Button from '@material-ui/core/Button'
import Box from '@material-ui/core/Box'
import {
  usePopupState,
  bindHover,
  bindMenu,
} from 'material-ui-popup-state/hooks'

type HoverMenuProps = {
  id: string,
  title: React.Node,
  children: React.Element<typeof MenuItem>[],
}

function HoverMenu({ id, title, children }: HoverMenuProps): React.Node {
  const popupState = usePopupState({ variant: 'popover', popupId: id })
  return (
    <React.Fragment>
      <Button variant="contained" {...bindHover(popupState)}>
        {title}
      </Button>
      <Menu
        {...bindMenu(popupState)}
        getContentAnchorEl={null}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
      >
        {React.Children.map(children, child =>
          React.cloneElement(child, { onClick: popupState.close })
        )}
      </Menu>
    </React.Fragment>
  )
}

const MenuPopupState = () => {
  return (
    <Box
      display="flex"
      flexDirection="column"
      alignItems="center"
      justifyContent="center"
    >
      <HoverMenu title="About" id="about-menu">
        <MenuItem>Our Team</MenuItem>
        <MenuItem>Media</MenuItem>
        <MenuItem>Careers</MenuItem>
      </HoverMenu>
      <HoverMenu title="Help Center" id="help-center-menu">
        <MenuItem>Contact Support</MenuItem>
        <MenuItem>Your Tickets</MenuItem>
        <MenuItem>Knowledge Base</MenuItem>
      </HoverMenu>
    </Box>
  )
}

export default MenuPopupState

evengene · 2020-12-09T21:54:40Z

this is a small chunk of code for a particular button and it's dropdown.
here is the link to the test environment so you can test it on 414px
if a part of a dropdown is positioned over another button - the priority goes to the latter.
Let me know if you need anything else.
Thanks!

                     <Grid item>
                            <Button className="dropdown-button"  {...bindHover(draweraboutpopupState)}>
                                <div className={`btn-link`}>
                                    About
                                    <AboutArrowDrawer/>
                                </div>
                            </Button>
                            <Menu
                                {...bindMenu(draweraboutpopupState)}
                                getContentAnchorEl={null}
                                anchorOrigin={{vertical: 'center', horizontal: 'right'}}
                                // anchorPosition={{vertical: 'bottom', horizontal: 'center'}}
                                transformOrigin={{vertical: 'top', horizontal: 'bottom'}}
                                id="about">
                                <MenuItem onClick={draweraboutpopupState.close}>
                                    <Link className="inside-link" to='/about/OurTeam/'>
                                        Our Team
                                    </Link>
                                </MenuItem>
                                <MenuItem onClick={draweraboutpopupState.close}>
                                    <Link className="inside-link" to='/about/media/Media/'>
                                        Media
                                    </Link>
                                </MenuItem>
                                <MenuItem onClick={draweraboutpopupState.close}>
                                    <Link className="inside-link"
                                          to='https://angel.co/company/superworld'
                                          target="_blank"
                                          rel="noopener noreferrer">
                                        Careers
                                    </Link>
                                </MenuItem>
                            </Menu>
                        </Grid>

jedwards1211 · 2020-12-10T01:38:38Z

~~And are you using import Menu from 'material-ui-popup-state/HoverMenu'?~~ (looks like it in your test page)

What browser/platform did you take the video on? It seems like the pointer event handling might be buggy on that browser. (HoverMenu has to use pointer-events: none on the popover backdrop, and then turn them back on with pointer-events: auto on the menu popover element). It seems like as you said the menu element isn't even receiving the click.

If this prevents the issue it would at least give me some idea how to solve it.

jedwards1211 · 2020-12-10T01:39:44Z

Oh sorry just saw your test link. Let me look

jedwards1211 · 2020-12-10T01:43:44Z

Hmmm that issue doesn't seem to happen in Chrome on my macOS or Android phone at least. Also when you're tapping on the menu items, they're not taking you to the linked pages I take it?

jedwards1211 · 2020-12-10T01:48:58Z

Just FYI since the MenuItems have padding, if you tap within the padding it's outside the Links and just closes the menu without following the link. Not 100% sure if it will work but you could try <MenuItem component={Link} to='/about/OurTeam/'> to make the entire menu item a link.

evengene · 2020-12-10T02:58:59Z

Thanks, I'll check it out.

On Wed, Dec 9, 2020 at 6:49 PM Andy Edwards ***@***.***> wrote: Just FYI since the MenuItems have padding, if you tap within the padding it's outside the Links and just closes the menu without following the link. Not 100% sure if it will work but you could try <MenuItem component={Link} to='/about/OurTeam/'> to make the entire menu item a link. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#45 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACB3P37INCIVA5APKCY7ORTSUASKVANCNFSM4UTZYOYQ> .

-- Elina Shelest

evengene · 2020-12-10T15:57:02Z

ok, seems to be working :) thank you so much

jedwards1211 · 2020-12-10T20:10:16Z

Okay, I still want to try to prevent this from happening, without the workaround -- can you let me know what browser/platform you recorded that video on? Thanks!

evengene · 2020-12-12T00:40:49Z

I've recorded on iPhone, Safari. I have reports from other people testing the menu and for some of them it works and for others - not. They say the submenu opens every other time or it opens "help center", instead of "about". Not sure where this bug is coming from still. But thank you for putting time and attention to this issue.

…

On Thu, Dec 10, 2020 at 1:10 PM Andy Edwards ***@***.***> wrote: Okay, I still want to try to prevent this from happening, without the workaround -- can you let me know what browser/platform you recorded that video on? Thanks! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#45 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACB3P3235LZLCZITJQASJZLSUETLPANCNFSM4UTZYOYQ> .

-- Elina Shelest

jpodpro · 2021-04-05T20:28:27Z

we are experiencing what appears to be a similar version of this too. on mobile in our cascading submenus, if you click on the chevron or towards the right of a menu item that is meant to open a sub-menu it selects an item from the sub-menu that is never shown.

trying your fix from above doesn't change anything. i also noticed that this happens when the menus are against the edge of the screen. i think it has to do with the sub-menus running out of space and being positioned over top the current menu.

i have made a sandbox that shows our problem. note that the sub-menus wouldn't open at all in firefox device mode. however in windows chrome device mode it shows the problem:

https://codesandbox.io/s/festive-ellis-94je9?resolutionWidth=320&resolutionHeight=675&file=/src/context-menu.js
click 'open in new window' (top right)
open the debugger and enable device mode for a phone
open the menu on the right
clicking on the duplicate or delete chevron doesn't open the submenu but selects one of the submenu's items without showing it.

jedwards1211 · 2021-04-09T02:32:47Z

Sorry for the delay...man this is proving difficult to figure out :( I think I'm going to have to implement touch handlers instead of relying on click emulation

jedwards1211 · 2021-04-17T01:51:10Z

🎉 This issue has been resolved in version 1.8.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

jedwards1211 · 2021-04-17T02:09:33Z

Okay let me know if version 1.8.1 fixes this for y'all. Sorry for the long delay...it's mostly that I got sidetracked from this, but this situation is mess and I'm miffed at the Google Chrome team, and I kinda hate my workaround, which is to delay opening/closing with setTimeout(..., 0) when a touch event is detected.

If you want details of what the underlying problem is, read on...

For some reason, this is what was happening when you tap a hover trigger on a touch device:

trigger element gets a simulated mouseover event
my mouseover handler opens the menu
if the newly-opened menu contains the tap location, it gets a simulated click event (wtf? why should an element that didn't exist when the tap occurred get any event?)

And in the case where you tap a menu item that closes the menu on a touch device:

menu item gets a simulated click event
my click handler closes the menu
whatever is underneath the tap location gets a simulated click event (wtf? why did it pass through the menu?)

Real mouse events don't behave this way, so I think it's either a bug in the browser or React event handling.

I wish I could event.preventDefault() in the onTouchStart handler to prevent the simulated mouse events, but this is why I'm mad at the Google Chrome team -- ever since they made touch listeners passive by default, it's impossible to event.preventDefault() inside a React onTouchStart handler (see facebook/react#9809). I would have to get a ref to the DOM element to register an active touchstart listener, but this wouldn't be problematic because ~~1) Then it would clobber myRef in <Button ref={myRef} {...bindHover(popupState)} />~~ (EDIT: I forgot, same danger exists with event listeners and I advise about that in the readme, so I could try refs) and 2) I can't guarantee your component will forward the ref to a DOM element anyway.

jedwards1211 · 2021-04-17T02:13:56Z

I guess this API is not flexible enough though. Maybe I need to redesign the API to look like

<BindHover popupState={popupState} component={Button} />`

(typing components like this properly for TS/Flow is hard)

Or perhaps

<BindHover popupState={popupState}>
  <Button />
</BindHover>

In this case, I would have to clone the Button element, which is a can of worms if you want any of the injected properties to be required in the Button prop type defs.

jedwards1211 · 2021-04-17T02:14:44Z

By the way, cascading menus are under development in Material UI itself: mui/material-ui#20591 (comment)

brianedelman · 2021-06-20T21:52:03Z

This issue is fixed for me on my android phone in chrome but is still broken on my ios device in chrome and ios

jedwards1211 · 2021-06-30T15:50:22Z

@brianedelman sorry for the delay, I'll look into solving this by injecting refs into the hover and popover elements...

jedwards1211 closed this as completed in 6e3d1ee Apr 17, 2021

jedwards1211 added the released label Apr 17, 2021

jedwards1211 reopened this Jun 30, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Responsive Dropdown activates links below #45

Responsive Dropdown activates links below #45

evengene commented Dec 9, 2020

jedwards1211 commented Dec 9, 2020

evengene commented Dec 9, 2020 via email

jedwards1211 commented Dec 9, 2020

evengene commented Dec 9, 2020 •

edited

jedwards1211 commented Dec 10, 2020 •

edited

jedwards1211 commented Dec 10, 2020

jedwards1211 commented Dec 10, 2020

jedwards1211 commented Dec 10, 2020

evengene commented Dec 10, 2020 via email

evengene commented Dec 10, 2020

jedwards1211 commented Dec 10, 2020

evengene commented Dec 12, 2020 via email •

edited

jpodpro commented Apr 5, 2021 •

edited

jedwards1211 commented Apr 9, 2021

jedwards1211 commented Apr 17, 2021

jedwards1211 commented Apr 17, 2021 •

edited

jedwards1211 commented Apr 17, 2021 •

edited

jedwards1211 commented Apr 17, 2021

brianedelman commented Jun 20, 2021

jedwards1211 commented Jun 30, 2021

Responsive Dropdown activates links below #45

Responsive Dropdown activates links below #45

Comments

evengene commented Dec 9, 2020

jedwards1211 commented Dec 9, 2020

evengene commented Dec 9, 2020 via email

jedwards1211 commented Dec 9, 2020

evengene commented Dec 9, 2020 • edited

jedwards1211 commented Dec 10, 2020 • edited

jedwards1211 commented Dec 10, 2020

jedwards1211 commented Dec 10, 2020

jedwards1211 commented Dec 10, 2020

evengene commented Dec 10, 2020 via email

evengene commented Dec 10, 2020

jedwards1211 commented Dec 10, 2020

evengene commented Dec 12, 2020 via email • edited

jpodpro commented Apr 5, 2021 • edited

jedwards1211 commented Apr 9, 2021

jedwards1211 commented Apr 17, 2021

jedwards1211 commented Apr 17, 2021 • edited

jedwards1211 commented Apr 17, 2021 • edited

jedwards1211 commented Apr 17, 2021

brianedelman commented Jun 20, 2021

jedwards1211 commented Jun 30, 2021

evengene commented Dec 9, 2020 •

edited

jedwards1211 commented Dec 10, 2020 •

edited

evengene commented Dec 12, 2020 via email •

edited

jpodpro commented Apr 5, 2021 •

edited

jedwards1211 commented Apr 17, 2021 •

edited

jedwards1211 commented Apr 17, 2021 •

edited