Applying Grammarly suggestions are considered outside clicks

[brianlovin]

Hey everyone — I was wondering if people had encountered this situation where the Grammarly browser extension suggests typos/grammar fixes, and clicks on those suggestions are considered "outside clicks" by Headless UI's Dialog component.

Repro:

grammarly.webm

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

What version of Headless UI are you using? We did improvements to detect outside clicks where we consider outside clicks of third parties as "inside" clicks. But these improvements were made a few versions ago.

Do you also have a minimal reproduction repo by any chance? (To see how you setup the Dialog component mainly).

[brianlovin]

@RobinMalfait — I did not see your reply, apologies! We are still having this issue with our customers on v1.7.7. Here's a video:

Screen.Shot.2023-01-18.at.09.44.02.mp4

This is all on https://app.campsite.design (feel free to sign in if it's helpful to inspect the actual elements)

I have spent the last hour banging my head against the wall trying to create a reproducible example. Still, for some reason, the Grammarly Chrome extension refuses to run on textareas in a new Next.js project, either locally or when deployed to a Vercel preview. 😅

I also tried to spin up a CodeSandbox, but Grammarly doesn't let the extension run in CodeSandbox (or CS has disabled Grammarly entirely on their platform).

[RobinMalfait]

Hey! I figured out the problem!

You can read more on the subject here: #2217

[brianlovin]

Thank you @RobinMalfait 🥳

[Lipemenezes]

Having the same problem over here with the latest version of the library (1.7.1).

Managed to achieve the expected behavior by doing a few things:

1 - disable the onClose event from the Dialog
2 - add the keydown event to the window and close the modal when esc is pressed
3 - add an onClick event to the overlay of the modal to be able to close the modal by clicking outside of it

import React, { useCallback, useEffect } from 'react'
import { Dialog } from '@headlessui/react'

const Slideover = ({
  isOpen,
  closeModal,
}) => {
  const keyPressedFn = useCallback(({ keyCode }) => {
    if (keyCode === 27) { closeModal() }
  }, [closeModal])

  useEffect(() => {
    document.addEventListener('keydown', keyPressedFn, false)
    return () => {
      document.removeEventListener('keydown', keyPressedFn, false)
    }
  }, [keyPressedFn])

  return (
    <Dialog
      open={isOpen}
      onClose={() => null}
    >
      <div onClick={closeModal} />

      <Dialog.Panel>
        ...
      </Dialog.Panel>
    </Dialog>
  )
}

[bhushan-patil-official]

Any luck, we are stuck on the same issue.

[IzakJackson]

I'm also experiencing this issue on Vue 1.7.4