Need to call stopPropagation on Menu.Button onClick event

[shafkathullah]

Need to call stopPropagation on Menu.Button onClick event, other wise the enclosing 'a' tag gets the clicked. Any suggestion make this happen?

[huseyinbuyukdere]

I experienced that too in below sandbox. But can you write here what do you want actually. Maybe we can find workaround solution.

https://codesandbox.io/s/headlessui-button-example-0eviz?file=/src/App.js

[shafkathullah]

Another thing, Have you noticed, that only second click propagates the click event from Menu.Button to a tag, this is because first click is clearly handled by Menu.Button, but second is not.

[shafkathullah]

I think here <Menu.Button onClick={handleClick2}> the onClick listener simply not work

[huseyinbuyukdere]

Yes, But in your real case, why do you want to use button in anchor tag ?

[shafkathullah]

the UI design is I have a row data which is clickable and takes you to other page

[shafkathullah]

the lib is not giving access to event in anyway I guess...

[shafkathullah]

Simple work around I am using now is to wrap Menu.Button with span and then call stopPropagation there, only downside is we have an additional DOM element now.

[shafkathullah]

Also like this by rendering as Fragment we can call stopPropagation

<Menu as="div" className="relative flex">
        <Menu.Button as={Fragment}>
          <button
            onClick={(e) => {
              e.stopPropagation();
            }}
            className="px-2 h-full bg-prep-100 rounded-r-sm text-white hover:bg-opacity-90"
          >
            <ChevronDownIcon className="block w-5 h-5" />
          </button>
        </Menu.Button>
...
</Menu>

I settle for this now.