You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Great little library. I really love the bottom sheet. However, I'm seeing an issue in Safari on iOS, where clicking the overlay to close the bottom sheet is not being stopPropagated. Any interactive element under the overlay is triggered instead.
In your Basic example, you can see this by tapping the overlay atop the Open button to close the bottom sheet. It closes and immediately reopens the sheet, because the Open button is also being tapped. So, really easy to observe the issue. Hopefully also easy to fix.
PaulTime, CharlesKwak, abhishekangira, melissafzhang, burivuhster and 3 more
changed the title [-]Interactive elements beneath overlay are not "blocked"[/-][+]Interactive elements beneath overlay are not "blocked" in iOS[/+]on Oct 28, 2021
Facing the same issue. This is such a great library, but this issue is something that needs to be addressed for our implementation. I am hopeful that this will get resolved soon.
@matt-joecoffee
I did a workaround for now and it seems to be working fine. I added a div to the sibling prop and made that as an overlay and disabled the blocking prop.
For the overlay to look and work as the library, I just copied the overlay CSS from the library and updated a few styles. Specifically the opacity prop. I added transition and it looks and works almost similar. Added that CSS here for reference.
Does anyone understand why this is happening? I don't understand why the tap is going through the backdrop... And mobile Safari seems to be the only browser behaving like this. Safari desktop works fine.
After some investigation I found the root of the problem: The Reach UI portal that contains the bottom sheet needs to have the full height. So by adding this CSS globally the problem is fixed:
Just an update. one of the drawbacks of this method is the page will not be interactable for clicking for about a second after closed. Kinda annoying :/ Looking for a better solution.
I have faced with same issue. When I click on the backdrop div it propagates the event and causes unintended click on other components. I mix the solutions above and put some logic into it. Here is my way:
Create a sibling
Give data-rsbs-backdrop="true" to sibling, (we are trying to replace the original backdrop)
The original backdrop and overlay has z-index 3 (same for both), change sibling's z-index to 4 (or other number greater than 3), change overlay's z-index to 5 (or other number greater than 4)
By doing the stuff above, we put another layer between original backdrop and overlay , so we have the control right now.
Do whatever you want in sibling div
(Pay attention to css by the way, especially sibling's css)
I don't know if it breaks something, if it is then forgive me :D
I have faced with same issue. When I click on the backdrop div it propagates the event and causes unintended click on other components. I mix the solutions above and put some logic into it. Here is my way:
Create a sibling
Give data-rsbs-backdrop="true" to sibling, (we are trying to replace the original backdrop)
The original backdrop and overlay has z-index 3 (same for both), change sibling's z-index to 4 (or other number greater than 3), change overlay's z-index to 5 (or other number greater than 4)
By doing the stuff above, we put another layer between original backdrop and overlay , so we have the control right now.
Do whatever you want in sibling div
(Pay attention to css by the way, especially sibling's css)
I don't know if it breaks something, if it is then forgive me :D
Activity
[-]Interactive elements beneath overlay are not "blocked"[/-][+]Interactive elements beneath overlay are not "blocked" in iOS[/+]matt-joecoffee commentedon Nov 16, 2021
Sadly, this issue renders this package completely unusable for us. Is this still being maintained?
anirudh-wal commentedon Nov 25, 2021
Facing the same issue. This is such a great library, but this issue is something that needs to be addressed for our implementation. I am hopeful that this will get resolved soon.
anirudh-wal commentedon Nov 25, 2021
@stipsan Please see if this can be addressed. Or if we need to handle onDismiss in a different way.
anirudh-wal commentedon Nov 26, 2021
@matt-joecoffee
I did a workaround for now and it seems to be working fine. I added a div to the sibling prop and made that as an overlay and disabled the blocking prop.
For the overlay to look and work as the library, I just copied the overlay CSS from the library and updated a few styles. Specifically the opacity prop. I added transition and it looks and works almost similar. Added that CSS here for reference.
denizmersinlioglu commentedon Mar 14, 2022
Hi, here is our workaround to the issue.
TLDR: Use a background wrapper to stop click event propagation.
signorbusi commentedon Jun 1, 2022
Does anyone understand why this is happening? I don't understand why the tap is going through the backdrop... And mobile Safari seems to be the only browser behaving like this. Safari desktop works fine.
signorbusi commentedon Jun 2, 2022
After some investigation I found the root of the problem: The Reach UI portal that contains the bottom sheet needs to have the full height. So by adding this CSS globally the problem is fixed:
I can't guarantee that this will not break other things though, but so far everything looks good.
aeharding commentedon Aug 8, 2022
@signorbusi thanks, that worked great for me! I just had to update it to have a
z-index
higher than my header (that was being clicked through to).For me-
Nasty iOS Safari bug :/
Fix iOS dismiss touch event not being captured
Fix iOS dismiss touch event not being captured (#53)
aeharding commentedon Aug 8, 2022
Just an update. one of the drawbacks of this method is the page will not be interactable for clicking for about a second after closed. Kinda annoying :/ Looking for a better solution.
mahmutfurkankara commentedon Nov 9, 2022
I have faced with same issue. When I click on the backdrop div it propagates the event and causes unintended click on other components. I mix the solutions above and put some logic into it. Here is my way:
(Pay attention to css by the way, especially sibling's css)
I don't know if it breaks something, if it is then forgive me :D
Here is my react component
Here is my css
erhnml commentedon Jan 6, 2023
thank you, I just fixed it by hiding the orjinal backdrop.
ali-h-s21 commentedon Jan 21, 2023
Here is my simple solution that worked with me just fine. I just added a sibling, and set the 'blocking' to be false.
romshiri commentedon Apr 5, 2025
2025 is here. Is there any proper solution for this? Anyone?