Next.js Discord

Discord Forum

Issue opening modal inside dropdown or context menu

Answered
California pilchard posted this in #help-forum
Open in Discord
California pilchardOP
Okay I have a big problem I didnt find any solution. When I open a modal inside Dropdown Menu or Context Menu for example I have this :
Answered by California pilchard
Ive just upgrade all the radix element and seems to work now
View full answer

7 Replies

California pilchardOP
But when opening my modal with a classic button is working. There is an example :
export const ContextMenuWatchlistAction = ({
    children,
    watchlistItem,
}: {
    children: React.ReactNode,
    watchlistItem: UserWatchlist,
}) => {
    const { openModal } = useModal();
    const items = [
        [
            {
                icon: Icons.comment,
                onClick: () => openModal(ModalWatchlistComment, { watchlistItem }),
                label: watchlistItem?.comment ? 'Modifier le commentaire' : 'Ajouter un commentaire',
            }
        ]
    ];
    if (!watchlistItem) return children;
    return (
        <ContextMenu>
            <ContextMenuTrigger>
                {children}
            </ContextMenuTrigger>
            <ContextMenuContent>
                {items.map((group, fragindex) => (
                    <Fragment key={fragindex}>
                        {group.map((item, index) => (
                            <ContextMenuItem
                                key={index}
                                className="gap-2"
                                onClick={item.onClick}
                            >
                                <item.icon className="h-4 w-4"/>
                                {item.label}
                            </ContextMenuItem>
                        ))}
                        {fragindex < items.length - 1 && <ContextMenuSeparator />}
                    </Fragment>
                ))}
            </ContextMenuContent>
        </ContextMenu>
    )
}
And there is the error :
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: div
Ancestor with aria-hidden: 
@California pilchard Okay I have a big problem I didnt find any solution. When I open a modal inside Dropdown Menu or Context Menu for example I have this :
you can either ignore the errors as look like accessibility errors. Or if you want to fix them, use the onClick event on your drop down button and call the event.preventDefault() method. The button should now stay open and the modal should open as well
Answer
@California pilchard Ive just upgrade all the radix element and seems to work now
So is the „preventDefault()“ the solution?
@B33fb0n3 So is the „preventDefault()“ the solution?
California pilchardOP
No I didnt change anything (ive already tri preventDefault and wasnt working), only update radix...