-
Notifications
You must be signed in to change notification settings - Fork 794
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
Interacting with Grammarly extension in a Dialog registers as an outside click #2055
Comments
In the meantime, you can use this workaround #1280 (comment) or this https://codesandbox.io/p/sandbox/throbbing-lake-84vkp7 (need to open the preview in a new tab to show the Grammarly) |
So I think this workaround will work better, no? https://codesandbox.io/p/sandbox/throbbing-lake-84vkp7 |
I can confirm that this issue also occurs using the 1Password extension. When I press the 1Password lock icon at the right of a text field, the dialog is closed. |
Any update to this? |
Actually, this seems to have been fixed (at least for the Grammarly extension, unsure about 1Password) |
I still experience dialogs being closed in Firefox 116 with the latest Grammarly extension when interacting with the Grammarly extension. At least Firefox tells me there are no updates for Grammarly. This is the extension I am using: |
Chromium 111.0.5563.64 with the latest Grammarly extension also has issues (though as opposed to Grammarly in Firefox), I can choose spelling suggestions without it closing the dialog. But clicking on the green circle icon or the red circle with the number of spelling issues still closes the dialog. |
Related to #1859 |
Hey @benoitgrelard, I was able to solve this issue in Melt UI melt-ui/melt-ui#1114. RadixScreen.Recording.2024-05-09.at.4.03.52.PM.movMeltScreen.Recording.2024-05-09.at.4.04.29.PM.movThe issue here is that the DismissableLayer component should allow external JS to stop propagation of an interaction event. In the videos I provided, 1Password actually calls I want to explain what I implemented in Melt and see if it makes sense to you before I create a PR for Radix. The goal is to allow external JS to intercept any interaction event which should prevent us from calling The challenge is that JS still triggers various events even if you intercept other events. For example, intercepting So the solution I came up with is to keep track of whether any events were intercepted, and only call And here is how I figured out how to check if any event was intercepted. For each event type ( I also only call I also debounce the start-interaction event handler to allow other start-interaction event handles to mark an event as non intercepted. I detailed all of this in the Melt UI PR melt-ui/melt-ui#1114. Let me know if this is something that makes sense to you and I will be happy to create a PR :) |
Bug report
Current Behavior
We have a dialog where users compose new posts. In that composer, when people interact with the Grammarly browser extension, those interactions are registered as outside clicks and attempt to close the dialog.
Expected behavior
Grammarly overlay clicks should not register as outside clicks.
Reproducible example
Unfortunately, I'm having a hard time getting a reproducible example in CodeSandbox, for some reason Grammarly doesn't want to work in that context. Here's a video of the problem (note that we show a "Confirm delete draft" dialog if the user tries to close the composer when they have drafted content, so that confirmation dialog is being triggered when the Dialog is being told to close).
To test in production, you can:
Screen.Shot.2023-03-29.at.10.10.45.mp4
Suggested solution
We had the same issue when we were using Headless UI but recently switched to Radix. Here is how the Headless UI team resolved the problem:
tailwindlabs/headlessui#2217
The text was updated successfully, but these errors were encountered: