search

reactjs / react-modal

Accessible modal dialog component for React
http://reactcommunity.org/react-modal
MIT License
7.34k stars 808 forks source link

Android back button support and a new web platform feature proposal #875

Open domenic opened 3 years ago

domenic commented 3 years ago

Hi react-modal maintainers,

The Chrome team is investigating how to make modals on the web better. One area we've identified is that it's hard for libraries to get the correct behavior on Android of having the back button close a modal. (This can also be an issue on other platforms, e.g. iOS VoiceOver has a special gesture for closing modals.) As such, we have a new proposal at https://github.com/WICG/proposals/issues/18 which is looking for signals of web developer interest, to see if it's worth investing in.

I wasn't able to determine from your issue tracker or your source code if this was something you or your users had run into, so I thought I'd open a new issue to get your feedback. Is this problem something your library is interested in? If so, do you have any thoughts on the proposed API? It's actually partially implemented in Chrome behind a flag (with the old name ModalCloseWatcher), so you could try it out.

Best, -Domenic

diasbruno commented 3 years ago

Hi @domenic,

react-modal users can handle when to display modal using isOpen property. If it's possible to be notified when the back button is pressed or register a callback to keep track of it, the user can manage this behavior - when appropriate.

react-modal could handle this like it handles the ESC button. We have a property shouldCloseOnEsc, possibly, shouldCloseOnBackButton.

domenic commented 3 years ago

react-modal could handle this like it handles the ESC button. We have a property shouldCloseOnEsc, possibly, shouldCloseOnBackButton.

Oh, very interesting! The way we designed the CloseWatcher API, it doesn't tell you what the close signal is: whether it's an Android back button, a desktop Esc key, an iOS VoiceOver gesture, or a PlayStation square button. They all give the same signal.

Do you think your users would specifically want the ability to control each of these independently, with separate properties like you describe? Our thinking was that bundling them together would give users a more expected behavior.

diasbruno commented 3 years ago

It would be nice to provide an API where users could also receive the CloseWatch's signals or events...

It wouldn't be easy to find a proper API, because we'll need to provide the fallback in case we don't have the watcher.

I'll try to have a better look on API side to find more options...

dvoytenko commented 3 years ago

Should this use case be any different than shouldCloseOnEsc? The CloseWatcher should allow implementing the same closing pattern as shouldCloseOnEsc.