Highlight on mobile click

[Garett-MacGowan]

Version 2.5.0

Steps to Reproduce

When users interact with the menu on mobile devices, the burger is highlighted during the transition.

Reproduceable on the example site: https://hamburger-react.netlify.app/

Note

This may or may not be expected, but it would be nice to have the option to turn it off. I recognize most click events on mobile are associated with this behavior.

Workaround

My temporary (tested only on chrome) workaround using style jsx:

<div className='burger-container' onClick={props.onClick}>
    <Spiral size={28} label='menu' easing="ease-out" hideOutline={true}/>
</div>
<style jsx>{`
  .burger-container:first-child {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
`}</style>

webkit, moz, ms, and user-select statements taken from this stack overflow.

[luukdv]

Thanks for reporting.

I indeed decided not to turn this off by default since it's expected on click, but I agree it would be helpful to make it more easy to turn off.

In version 3.0 you will be able to simply forward style and className, for now this would be simplest:

.hamburger-react { -webkit-touch-callout: … }

[fffan64]

hello, thanks for the pkg it's great

any eta for the v3 release ? thanks !

[luukdv]

No ETA yet! Working on it in the v3 branch whenever I can, but I've been short on time. I'll let you know when it's ready to test.

[luukdv]

Update about v3.0: Looking for new owner