Blocked aria-hidden on an element

[saijoro]

when I using a the drawer from shadcn, when i trigger the drawer using TriggerDrawer, then the state updates to true, But the error getting up and nothing happens.

For more info

I have started a vite react js project, by using tanstack start and that uses vinxi, along with tailwind and shadcn, Solve if possible.

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: button:

These are some snaps of the configs

[MhL5]

same issue, anyone found a good solution to this?
the issue is the trigger doesnt lose focus after drawer content pops up

im using this

  <DrawerTrigger
          onClick={(e) => {
            e.currentTarget.blur();
          }}
        >

[mustafaidk]

I am not sure if this is the correct way but it works for me

<Drawer open={openDrawer} onOpenChange={setOpenDrawer} autoFocus={openDrawer} />

or

<DrawerTrigger autoFocus={openDrawer} />

[Frankxhh]

nice bro

[dejoma]

Same issue with the component of shadcn.

For this, the autoFocus fix does not work. Haven't found any solution yet.
How to reproduce:

• Dialog with a component inside. Open dialog Click on the Select Close dialog (hit escape) Focus is left inside the dialog; if you do modal={false} on the dialog there is no issue.

[nullideas]

hey dejoma,

I found this solution which worked for me. found it on reddit made by @Aevil_15

https://www.reddit.com/r/nextjs/comments/1hnnbem/help_with_ariahidden_issue_in_dropdown_menu_and/

[boonyarit-iamsaard]

This work for me 👍

[dejoma]

I did find another solution:

<Popover open={open} onOpenChange={setOpen} modal={!usedInDialog}>

and having latest version of all radix packages

[Darius-htf]

Hey guys, found another solution to this problem, it won't relieve the accessibility warning, but it wouldn't prevent the click events on the UI elements

OrdersActions

Just keep it modular and scalable

import { Order } from "../../types/OrdersType";
import { OrderDetailsModal } from "./OrderDetailsModal";
import { useOrdersActions } from "../../hooks/useOrdersActions";
import { InvoicePreviewDrawer } from "./InvoicePreviewDrawer/InvoicePreviewDrawer";
import { OrdersActionsDropdown } from "./OrdersActionsDropdown";
import { useState } from "react";

interface OrdersActionsProps {
  order: Order;
}

export function OrdersActions({ order }: OrdersActionsProps) {
  const [openDropdown, setOpenDropdown] = useState(false);
  const {
    handleViewDetails,
    modalOpen,
    selectedOrder,
    setModalOpen,
    handleViewPDF,
    openPDFModal,
    setOpenPDFModal,
  } = useOrdersActions();

  return (
    <>
      <OrdersActionsDropdown
        open={openDropdown}
        onOpenChange={setOpenDropdown}
        onViewDetails={() => handleViewDetails(order)}
        onViewPDF={() => handleViewPDF(order)}
      />

      {/* Dialogs: Moved out for preventing to get closed */}
      <OrderDetailsModal
        onOpenChange={setModalOpen}
        open={modalOpen}
        order={selectedOrder}
      />

      <InvoicePreviewDrawer
        onOpenChange={setOpenPDFModal}
        open={openPDFModal}
        order={selectedOrder}
      />
    </>
  );
}

So before the applied solution, the opening of the modal and the drawer would cause the clicking event issue

And here's the solution for resolving it

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { FileText, Info, MoreHorizontal } from "lucide-react";

interface OrdersActionsDropdownProps {
  onViewDetails: () => void;
  onViewPDF: () => void;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function OrdersActionsDropdown({
  onViewDetails,
  onViewPDF,
  open,
  onOpenChange,
}: OrdersActionsDropdownProps) {
  const handleViewPDF = () => {
    onOpenChange(false);

    setTimeout(() => {
      onViewPDF();
    }, 50);
  };

  const handleViewDetails = () => {
    onOpenChange(false);

    setTimeout(() => {
      onViewDetails();
    }, 50);
  };

  return (
    <DropdownMenu open={open} onOpenChange={onOpenChange}>
      <DropdownMenuTrigger asChild>
        <Button
          onClick={() => onOpenChange(!open)}
          variant="ghost"
          className="h-8 w-8 p-0"
        >
          <span className="sr-only">Open menu</span>
          <MoreHorizontal className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="end">
        <DropdownMenuLabel>Actions</DropdownMenuLabel>

        <DropdownMenuItem onClick={handleViewDetails}>
          <Info className="w-4 h-4" />
          View Details
        </DropdownMenuItem>

        <DropdownMenuItem onClick={handleViewPDF}>
          <FileText className="w-4 h-4" />
          PDF Preview
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Just added a bit of a delay before triggering details and pdf viewer, and boy it works, though you still have the aria-hidden warning, but I mean it works