Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown/popover inside modal cannot be clicked #87

Open
prakashini opened this issue Apr 21, 2019 · 5 comments
Open

Dropdown/popover inside modal cannot be clicked #87

prakashini opened this issue Apr 21, 2019 · 5 comments

Comments

@prakashini
Copy link

prakashini commented Apr 21, 2019

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
Copy link
Owner

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.

@davidtheclark davidtheclark changed the title React aria modal with kendo query Dropdownlist onChange event not triggered. Dropdown/popover inside modal cannot be clicked May 19, 2019
@gabycperezdias
Copy link

gabycperezdias commented Aug 13, 2019

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
Copy link

gabycperezdias commented Aug 14, 2019

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
Copy link

tareq89 commented Sep 3, 2020

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

@ref45638
Copy link

ref45638 commented Dec 7, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants