search

reactjs / react-modal

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

iOS - Second modal wont open if the first is already opened #1048

Closed thomas-rooty closed 3 weeks ago

thomas-rooty commented 3 weeks ago

Summary:

Steps to reproduce:

  1. Create a modal with a button in it that would open a second modal

Expected behavior:

The second modal should correctly open in front of the first modal.

Link to example of issue:

Can't seem to reproduce succesfully ...

Additional notes:

Video of the issue : https://github.com/reactjs/react-modal/assets/19364687/f8c5be5c-535c-442b-b75a-ac92fc16c0e6

The code

The code is pretty large and not very clean but here's how I structured things for now (I know its messy) :

ModalAddFastEquip is a ReactModal that contains a DynamicEquipTable component, this DEA has 2 other modals in its return (ModalAddRow, and ModalEditFastEquip). So to open ModalAddRow, I need to open first ModalAddFastEquip, but as you can see in the video it's not correctly opening only in iOS, the used browser on the iPhone doesn't seem to change or resolve anything, it works on both Android and Windows tho.

If you really need the code, just tell me and I'll try to clean it up/simplify it to share it with you guys. I'm trying my chance wihout providing anything because maybe it's a known issue and I'm doing something wrong that is obvious to you !

thomas-rooty commented 3 weeks ago

Well, rubber ducking syndrom got me there. I had set overflow scroll on the second modal and somehow it messed up the whole modal, ofc I've set this overflow scroll on every second modal of the page so it was the only thing that was causing the issue... Fixed !