Issue opening modal inside dropdown or context menu
Answered
Pacific herring posted this in #help-forum
Pacific herringOP
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 Pacific herring
Ive just upgrade all the radix element and seems to work now
7 Replies
Pacific herringOP
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: @Pacific herring 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@B33fb0n3 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
Pacific herringOP
Ive just upgrade all the radix element and seems to work now
Answer
@B33fb0n3 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
Pacific herringOP
I cannot ignore because when append I cnanot click on anything else without refreshing the page
@Pacific herring 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?
Pacific herringOP
No I didnt change anything (ive already tri preventDefault and wasnt working), only update radix...