Search code examples
reactjsnext.jsradix-uitagifyshadcnui

Tagify Dropdown not interactable when used with shadcn / radix ui Dialog

I'm facing a usability problem with Shadcn/Radix UI dialog in my web application. I've implemented a feature from tagify where i dynamically appended a dropdown menu of an input field inside my shadcn / radix ui dialog to the body. However, after doing so, I've observed that I can no longer click or select the dropdown items within the dialog since the way of shadcn disabled that.

It seems that Shadcn is completely disabling interaction with elements outside the dialog and its content, making it impossible to interact with the dropdown items from tagify. I believe a potential solution might be to append the input field directly to the input element itself, allowing normal interaction or allowing the hovering / clicking on the dropdown menu's component.

I've attached an image illustrating the problem for better understanding where you can see I have an tagify input menu inside a radix ui dialog . Any insights or suggestions would be greatly appreciated.

Solution

  • It is not Shadcn it is Radix-ui the underlying library. I was facing a similar issue with Dropdown and Tabs and was able to solve the Dropdown menu by changing it to a controlled state.

    (Details here: https://github.com/radix-ui/primitives/discussions/2816#discussioncomment-9010606 )

    Edit: The Dropdown menu, Tabs and other components from Radix-ui/shadcn-ui, use onMouseDown, onPointerDown and others to update the value, so instead of setting a click in your Testing library, you should trigger an event. From my current research, I notice that all of them has OnKeyDown, 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)

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