-
Notifications
You must be signed in to change notification settings - Fork 762
The React CdsModal
wrapper does not close a modal on backdrop overlay click / when hitting Esc
#5907
Comments
@astorije |
Really? The X is closing it for me, but clicking on the backdrop is not. Neither is hitting escape. Is this a browser issue? I'm on Chrome 90. Edit: It's also not working for me in Firefox or Safari... |
@mathisscott, are you trying on https://stackblitz.com/edit/react-ts-bgirwg?file=App.tsx? (and not the other Stackblitz) |
I don't think its browser specific, it happens to me on Firefox as well as Chrome |
Sorry for the confusion. I think I clicked on the wrong link. I can see it in @astorije 's link... |
Hi everyone! Just following-up on this, is this still on your radar? Anything we can help with? |
@astorije on our radar, once Shape is over our bandwidth should open back up a bit 👍 We will be updating the react wrapper to the new version from the https://lit.dev project. Ours is an early fork of that version so the update may solve this as well. |
Oh that's great, thanks! |
FYI, I updated https://stackblitz.com/edit/react-ts-bgirwg to use Clarity Core/React 5.4.0 as I know you've done some work around |
Looking into this, it appears that the esc key and backdrop click share a couple of circumstances. Both are set up inside the parent superclass of the modal. I don't think that's significant because if React messed with that so much more would be broken in the components. The other thing they share is how they are defined as event handlers. You'd see in the close button component how the close button binds It's my hypothesis that React Hooks are losing track of I can take a look at this tomorrow AM. If you are still on Europe time and want to get to it before me, please feel free to give it a try. I think what we need to do, though, is just change those bindings in
...to...
It may not 100% wind up looking like that but that's the ballpark I'd look into... |
@astorije The breakage here is something that we suspected might break in React but we didn't have any hard evidence that it would (or was) breaking. The problem is the focus traps on those two specific items are relying on the real DOM and, at least with React Hooks, the virtual DOM of React is not in sync. More to the point, React isn't allowing access to the real DOM at all in these specific cases. We had planned a refactor of focus-traps to remove reliance on the DOM and to give Core a sort of singleton functionality to workaround dependency injection concerns. It was not a top priority because we didn't have any concrete issues come up related to our concerns. Now we do. CC: @coryrylan (This is that thing we've been talking about...) |
Thank you for this summary, that's super informative. Let us know if we can help! |
Hey @mathisscott and @coryrylan! Do you have any updates on this? We are still blocked to convert our homegrown modals to Clarity. Thanks! 🙏 |
There was some related work I did that addressed part of this. I need to double check if it had any impact or what is left to do. |
I tried to upgrade Clarity versions at https://stackblitz.com/edit/react-ts-bgirwg but somehow Stackblitz broke and I can't seem to get it back. |
WorkaroundThe prior PR fixed part of the issue. The last part is related to React not supporting boolean attrs. False can't be used because react will convert it to a string value leaving
https://codesandbox.io/s/cds-modal-close-forked-udvgj?file=/src/App.tsx Normally the React wrapper can convert boolean attrs/properties automatically. However Action ItemI am leaving this open to update the types so we can also set with which allows this:
|
I just updated https://codesandbox.io/s/cds-modal-close-ejy2h?file=/src/App.tsx to v5.5.4 (just in case...) and to include your workaround, @coryrylan. Is there any chance |
We are working on updating |
Sounds good, thank you! |
I've verified that this works in both props-based react as well as react hooks in the latest code in the dropdowns branch. This should be available and fixed by the new reactive controllers for focus trap and closable features. Closing in favor of tracking the popup issue. I will ref this issue back to that issue. |
Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary. |
Describe the bug
The
onCloseChange
event handler onCdsModal
does not add a listener on the backdrop, so the modal cannot be closed by clicking the backdrop overlay or hittingEsc
(but clicking the modal×
button does).Looking at the Storybook doc, it seems we need to do this manually which React doesn’t play well with, and I couldn’t make it work bug-free.
I believe the React CdsModal wrapper should wire that overlay
onCloseChange
listener itself.How to reproduce
This StackBlitz should demonstrate the issue: https://stackblitz.com/edit/react-ts-bgirwg?file=App.tsx
Steps to reproduce the behavior:
×
closes itEsc
does notPorting from StackBlitz for full context within this issue, we expect the following code to work:
Expected behavior
The code above should work exactly like the bare Web Components equivalent does: https://stackblitz.com/edit/typescript-mep2k5?file=index.ts
Versions
Clarity project:
@cds/react
)Clarity version:
Framework:
Framework version:
Tested the issue with latest React v16. Any version of React should have the same issue though.
Additional information
@ashleyryan opened a discussion about framework-specific documentation, and I believe based on the solution for this, this could be a perfect use case for that: #5895
The text was updated successfully, but these errors were encountered: