search

davidtheclark / react-aria-modal

A fully accessible React modal built according WAI-ARIA Authoring Practices
http://davidtheclark.github.io/react-aria-modal/demo/
MIT License
1.03k stars 96 forks source link

Dropdown/popover inside modal cannot be clicked #87

Open prakashini opened 5 years ago

prakashini commented 5 years ago

Hi,

We have our modal built with kendo query ui and have wrapped it up with aria modal and most of the accessibility related is working fine. But facing one issue where the kendo dropdownlist does not trigger onChange event when selecting the “li” Items. The selection works fine with keyboard events(ie) able to navigate through keyboard keys. Can you please give some inputs on this.

davidtheclark commented 5 years ago

I suspect that this is because the modal's focus-trap is preventing you from shifting focus to the dropdown (via click). Probably Kendo is rendering the dropdown in a node outside the modal, so it is not recognized by the modal's focus trap.

This is one of the main problems the modal has — dealing with popovers/dropdowns inside the modal that are in a displaced DOM node outside the modal's own node. Happy to hear ideas for solutions; and I'll change the issue title accordingly.

gabycperezdias commented 4 years ago

I managed to make it work for my scenario (our own Popover component) by creating a focus context where I set the actualActiveElement context to be used as root to append any floaters instead of document or whatever default. This means that the floater would be appended to the focusable dialog. But this does not work when using renderTo because the element is 'cloned' so the references are lost, any ideas of how to work around this?

gabycperezdias commented 4 years ago

But allowing outside click will mess with the whole point of having a focus trapped, won't it? And, what if I want the popover to be clickable but my dialog to not close when the popover is clicked? Another thing, the "allowOutsideClick" is only for clicks or for actions in general? Because if it is only for clicks, this will make the Popover not accessible...

tareq89 commented 3 years ago

any update on this issue? I am facing the same problem with Ant Option Select component.

ref45638 commented 2 years ago

focus-trap prevent the click function outside the modal. so I find the way to fix this bug is that we should append the thing you want to click to the modal

here is the demo: https://codesandbox.io/s/react-arial-modal-cannot-click-84po7?file=/src/Datepicker.js