2

I'm trying to create a top navigation menu using react-popper and react-router-dom.

Along the top navigation I have MenuItems, which, when hovered over, or tapped on a touch screen, expand with a popper component to show sub navigation items. You are only able to be redirected to another page via the sub navigation items. That's the current state of it

What I want to achieve is for mouse users to be able to immediately redirect via the MenuItem itself, if they so wish. But since phone/tablet users don't have that hover state, I want them not to redirect from the MenuItem and still just expand the sub nav options.

I decided to try and use event.stopPropagation() to seperate these two event handlers. But the onTouchStart event on the nested div is still bubbling up and triggering the click event as well.

  handleClick = () => {
    console.log("handleClick")
  }

  handleTouch = (event) => {
    console.log("handleTouch")
    event.stopPropagation();
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      this.setState({
        hover: true
      })
    }, 150)
  }

  render() {
    const config = this.props.config

    return (
      <div
        onClick={this.handleClick}
        onMouseOver={this.handleClick}
        onFocus={this.handleClick}
      > <a href={config.href === '/' ? config.href : null} >
          <Manager>
            <Target style={{ position: 'relative' }}>
              <div onTouchStart={this.handleTouch}>
                {this.display(config, this.state.hover)}
              </div>
            </Target>
          </Manager>
        </a>
      </div>
    )
  }

I've also tried

  componentDidMount() {
    document.addEventListener('click', (event) => {
      event.stopPropagation();
    }, false)
  }

as someone said that events already bubble up from the document and bypasses any other stopPropagate(), but no luck there either.

Alison Williams
  • 21
  • 2
  • How are you defining the difference between mobile and desktop? size or touch? or both? also from a UX perspective this is a nightmare, you have the "same" action with 2 different results. I dont know how you would change it but its something you can bring up when a designer asks you to make something like this. – Joe Lloyd Feb 28 '20 at 15:23
  • @JoeLloyd I'm pretty new to react, was hoping that onTouchStart is only triggered by a touch action and using that to distinguish the interactions? But yes I agree this a clunky approach in general – Alison Williams Feb 28 '20 at 15:29

0 Answers0