[Bug]: Modal closes when using 1Password browser extension

[maelp]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: pnpm@8.6.0
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.3.3
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

None

Steps to reproduce

Not sure where the bug comes from, but when I have a form in a modal (I'm using something similar as the Dialog example on shadcn-vue), when I click on the 1Password icon, it closes the modal

Describe the bug

It should keep the modal open

Expected behavior

No response

Conext & Screenshots (if applicable)

No response

[romansp]

@maelp 1Password button is placed inside shadow DOM attached to body and rendered as position: fixed on top of the <input>. So clicks on that button are considered to be outside of the modal thus modal attempts to close.

I'm afraid that for now you'll have to provide custom @pointerDownOutside or @interactOutside handlers to detect such click and event.preventDefault() it.

Also check out these threads for possible workarounds:

• [Dialog] Pointer down on Overlay scrollbar closes dialog (impossible to grab scroll) radix-ui/primitives#1280 (comment)
• Interacting with Grammarly extension in a Dialog registers as an outside click radix-ui/primitives#2055

[maelp]

Thank you!

Adding this to the Dialog works, perhaps we can integrate it in radix-vue/shadcn-vue?

        @pointer-down-outside="
          (event) => {
            event.preventDefault();
          }
        "
        @interact-outside="
          (event) => {
            // @ts-ignore
            if (event.currentTarget?.contains(event.target)) {
              event.stopPropagation();
            }
          }

[romansp]

@maelp this will deny all click outside events and keep Dialog around which isn't desirable for the most of use cases. Maybe you wanted AlertDialog behavior in the first place?

[maelp]

hmmm you're right.. is there a workaround which still allows to close the modal by clicking outside?

[romansp]

@maelp I'd say you'd want to carefully inspect event in @interact-outside handler, check if event's target is 1Password button based on your requirements and preventDefault() only in that case.

FYI you don't need pointer-down-outside as interact-outside covers both pointerdown and focus outside events.

This should work:

// ...
<DialogContent @interact-outside="handleInteractOutside"></DialogContent>
// ...
function handleInteractOutside(event: Event) {
  const is1PasswordButtonClick = /* check event.target.tagName maybe? */
  if (is1PasswordButtonClick) {
    event.preventDefault();
  } 
}

[maelp]

Thanks I'll try that!

[linkb15]

I am from ReactJS world!

Thanks for the advise! Managed to solve it because of this comment as well.

<DialogContent
  onInteractOutside={e => {
    const target = e.target as HTMLElement;
    const isGrammarly =
      target && target.hasAttribute('data-grammarly-shadow-root');

    const is1Password = target.tagName === 'COM-1PASSWORD-BUTTON';

    if (isGrammarly || is1Password) {
      e.preventDefault();
    }
  }}
>
...

@maelp I'd say you'd want to carefully inspect event in @interact-outside handler, check if event's target is 1Password button based on your requirements and preventDefault() only in that case.

FYI you don't need pointer-down-outside as interact-outside covers both pointerdown and focus outside events.

This should work:

// ...
<DialogContent @interact-outside="handleInteractOutside"></DialogContent>
// ...
function handleInteractOutside(event: Event) {
  const is1PasswordButtonClick = /* check event.target.tagName maybe? */
  if (is1PasswordButtonClick) {
    event.preventDefault();
  } 
}