VanillaJS Click Interaction - E2E And Product Tours

[guifeliper]

I am using Driver JS to create a Guide tour for users in my application, some of the items I click programmatically for the user, so for example if there is a button I do a vanilla .click() in the element. However, it is not working on Radix/shadcn-ui and I sincerely don't understand why.

Webpage: https://www.radix-ui.com/primitives/docs/components/dropdown-menu
Example using id:

const element = document.querySelector("#radix-\\:r0\\:")
element.click()

Would you happen to know anything about this situation?

[guifeliper]

The current fix was adding a controlled state to the DropdownMenu. So now I can .click the element without issues.

  const [open, setOpen] = useState(false)
  return (
    <DropdownMenu open={open} onOpenChange={setOpen}>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          className="text-detail"
          id="request-options-button"
          onClick={() => setOpen(!open)}
        >
          <MoreVertical className="h-4 w-4" />
          <span className="sr-only">Options</span>
        </Button>
      </DropdownMenuTrigger>

Why does this happen?

DropdownMenuTrigger overwrites every event from the button, not making the bubble event work.
I am not closing this as an answer as I would like to know if my conclusion is correct.
@benoitgrelard

[guifeliper]

After coming back to this issue on Tabs component, I took a look at their code and noticed they use onMouseDown, onPointerDown and others to update the value, so instead of setting a click in your Testing library or your programmatically click, you should trigger an event. From my current research, I noticed they are using OnKeyDown on the components that I searched for, so I am considering they have it for all of them, so I suggest the following code.

const myDropdown = document.querySelector("#dropdown")
const keyDownEvent = new KeyboardEvent("keydown", {
      bubbles: true,
      cancelable: true,
      key: "Enter",
      keyCode: 13
    });
myDropdown.dispatchEvent(keyDown)

However, I don't consider the proper solution, I also don't know why they made that choice of "disabling" the onClick. which, I would love to know.

You can learn more about their implementation here: https://github.com/radix-ui/primitives/blob/b32a93318cdfce383c2eec095710d35ffbd33a1c/packages/react/tabs/src/Tabs.tsx

[ChurroC]

Another solution that works for me is to

<DropdownMenu open={open} onOpenChange={setOpen}>
        <Button
          variant="ghost"
          className="text-detail"
          id="request-options-button"
          onClick={() => setOpen(!open)}
        >
                <DropdownMenuTrigger asChild>
                          <MoreVertical className="h-4 w-4" />
                          <span className="sr-only">Options</span>
                </DropdownMenuTrigger>
        </Button>
</DropdownMenu>