79425148

Date: 2025-02-09 15:32:58
Score: 3
Natty:
Report link

I have the same issue with Dialog associated to Dropdown component.

Here is the error code I get in console :

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

And I see in elements inspector than the body element receive this after closing Dialog :

style: "pointer-events: none;"

My code here :

    const renderDialogContent = () => {

    if(!action) return null;

    const { value, label } = action

    return (
        <DialogContent className="shad-dialog button">
            <DialogHeader className="flex flex-col gap-3">
                <DialogTitle className="text-center text-light-100">{label}</DialogTitle>
                {value === "rename" && (
                    <div className="flex flex-row">
                        
                        <InputRenameLeft
                            type="text"
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                        />
                        <InputRenameRight
                            type="text"
                            value={"."+file.extension}
                            disabled
                            className="!cursor-default !select-none"
                        />

                    </div>

                )}

                {value === "details" && (
                    <FileDetails file={file} />
                )}

                {value === "share" && (
                    <ShareInput users={users} file={file} onInputChange={setEmails} onRemove={handleRemoveUser} isRemoving={isRemoving} id={id} isSubmitted={isLoading}/>
                )}

                {value === "delete" && (
                    <p className="delete-confirmation">
                        Are you sure to delete {` `}
                        <span className="delete-file-name">{file.name}</span>&nbsp;?
                    </p>
                )}
            </DialogHeader>
            {value === "share" && (
                <DialogFooter className="flex flex-col gap-3 md:flex-row">
                    <Button onClick={closeAllModals} className="modal-cancel-button">
                        Cancel
                    </Button>
                    <Button onClick={handleAction} className="modal-submit-button" disabled={isLoading || emails.length === 0}>
                        <p className="capitalize">{value}</p>
                        {isLoading && (
                            <Image src="/assets/icons/loader-white.png" alt="loader" width={24} height={24} className="animate-spin"/>
                        )}
                    </Button>
                </DialogFooter>
            )}
            {value === "rename" && (
                <DialogFooter className="flex flex-col gap-3 md:flex-row">
                    <Button onClick={closeAllModals} className="modal-cancel-button">
                        Cancel
                    </Button>
                    <Button onClick={handleAction} className="modal-submit-button" disabled={isLoading || name === file.name.replace(`.${file.extension}`, '')}>
                        <p className="capitalize">{value}</p>
                        {isLoading && (
                            <Image src="/assets/icons/loader-white.png" alt="loader" width={24} height={24} className="animate-spin"/>
                        )}
                    </Button>
                </DialogFooter>
            )}
            {value === "delete" && (
                <DialogFooter className="flex flex-col gap-3 md:flex-row">
                    <Button onClick={closeAllModals} className="modal-cancel-button">
                        Cancel
                    </Button>
                    <Button onClick={handleAction} className="modal-submit-button" disabled={isLoading}>
                        <p className="capitalize">{value}</p>
                        {isLoading && (
                            <Image src="/assets/icons/loader-white.png" alt="loader" width={24} height={24} className="animate-spin"/>
                        )}
                    </Button>
                </DialogFooter>
            )}
        </DialogContent>
    )
}

return (
    <Dialog open={isModalOpen} onOpenChange={(isOpen) => { setIsModalOpen(isOpen); if (!isOpen) closeAllModals(); }}>
        <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
        <DropdownMenuTrigger className="shad-no-focus transition-all duration-200 hover:text-brand"><IoEllipsisVertical /></DropdownMenuTrigger>
        <DropdownMenuContent>
        <DropdownMenuLabel className="max-w-[200px] truncate">{file.name}</DropdownMenuLabel>
        <DropdownMenuSeparator />
        {actionsDropdownItems.map((actionItem) => (
            <DropdownMenuItem key={actionItem.value} className="shad-dropdown-item" onClick={() => {
            setAction(actionItem)

            if(["rename", "share", "delete", "details"].includes(actionItem.value)) {setIsModalOpen(true)}
            }}>

            {actionItem.value === "download" ?
            (<Link href={constructDownloadUrl(file.bucketFileId)} download={file.name} className="flex items-center gap-2">
                <Image src={actionItem.icon} alt={actionItem.label} width={30} height={30}/>
                {actionItem.label}
            </Link>)
            :
            (
                <div className="flex items-center gap-2">
                <Image src={actionItem.icon} alt={actionItem.label} width={30} height={30}/>
                {actionItem.label}
                </div>
            )
            }
            </DropdownMenuItem>
        ))}
        </DropdownMenuContent>
        </DropdownMenu>

        {renderDialogContent()}
    </Dialog>
    
)
Reasons:
  • Blacklisted phrase (1): I have the same issue
  • Long answer (-1):
  • Has code block (-0.5):
  • Me too answer (2.5): I have the same issue
  • Low reputation (1):
Posted by: Empty iOS