disable dialog closing when click outside of dialog

[oliverkan]

Discussed in #1700

^{Originally posted by oliverkan July 21, 2022}
Hi, I am trying to find a way to make dialog persistent on screen. I mean I need to disable the closing feature of dialog when the user clicks somewhere outside of the dialog. I tried the static prop but it didn't help. I read the solution alternatives in this discussion. They mention about a tailwind class for pointer events but in new version Dialog.Overlay is deprecated. And also I don't want to loose esc key functionality if I have an empty onclose function. Is there any new, better way to solve this problem or should I have an empty onClose function and implement esc keydown event listener?

Thanks and regards.

[RobinMalfait]

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

Right now the Dialog doesn't have a way to differentiate between a click outside or an esc. We might introduce a new onDismiss in the future where we provide this information but right now this is not supported.

[oliverkan]

@RobinMalfait thanks for your quick answer. Is there any workaround or alternative way to disable outside click?

[eddievlagea]

I'm also interested in a workound for disabling outside click.

[zipme]

Same situation here

[aayardev]

Same situation here

[lfaudreejr]

Hi, also very interested in preventing this action, but keeping it when pressing escape. Right now you pass a boolean from the close event. Would you be willing to pass the event as a second argument for those who want to disable the close on outside click and keep the close on escape?

[bitfactory-oussama-fadlaoui]

An ugly workaround we're using at Bitfactory right now is to block setting the isOpen on TransitionRoot (taken from the example) property to false when a prop persistent is set to true.
Here's a snippet in Vue.js:

<script lang="ts" setup>
const properties = defineProps<{
    persistent?: boolean
}>();
const isOpen = ref(false);
const isOpenProxy = computed({
    get() {
        return isOpen.value;
    },
    set(value: boolean) {
        // We block any changes to the isOpen value if the modal is persistent.
        // It's an ugly workaround and it prevents us from animating upon closing the modal,
        // but HeadlessUI as of now doesn't support persistent modals.
        // Thus the only way to hide this modal is from outside this component (with a v-if).
        if (properties.persistent && !value) {
            return;
        }

        isOpen.value = value;
    },
});
</script>

<template>
    <TransitionRoot
        appear
        :show="isOpenProxy"
        as="template"
        @after-leave="emit('close')"
    >
...
</template>

[drichar]

Here is how I'm doing it in React

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

function MyDialog() {
  const [isOpen, setIsOpen] = useState<boolean>(false)

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape' && isOpen) {
        setIsOpen(false)
      }
    }

    window.addEventListener('keydown', handleKeyDown)
    return () => {
      window.removeEventListener('keydown', handleKeyDown)
    }
  }, [isOpen])

  return (
    <Dialog open={isOpen} onClose={() => {}}>
      <Dialog.Panel>

        {/* ... */}

        <button onClick={() => setIsOpen(false)}>Close</button>
      </Dialog.Panel>
    </Dialog>
  )
}

[xsjcTony]

@RobinMalfait Sorry for pinging in a closed issue, but is there any plan for this feature?

This is a common use case in my opinion, e.g.
When you don't want users to accidentally close the modal (e,g. when you have a form in the modal) when clicking outside, but keep the accessibility that keyboard users can still dismiss the modal by Esc key.

[geekcubed]

Bump on this issue. Just inherited a project using Headless UI and top of the to-do is to stop customers accidentally abandoning their carts by clicking outside the modal dialog.

Proposed fix is in place - #1968 - seems that it's 100% backwards compatible as api changes have defaults which are the current behaviour.

Current options for me are to build out some hack-y interceptors that inject event listeners into the top-level window object, or rip out headlessui in favour of something that supports this behaviour out the box

[kulapoo]

Im not sure if this will work for u guys, please check if u find any cons. That will help me as well or issue that I might face

what I did is something like this

import { Dialog as Dialog Base } from ''

// using styledComponent in my case or can use any class manipulation
const DialogRoot = styled(DialogBase)`
  z-index: 99999;
  position: relative
  display: ${props => props.isOpen ? 'block' : 'none'};

`
function CustomDialog(props) {
   const {
     open,
     onClose,
     ...otherProps
   } = props
   
   const closeWorkAround = useCallback(() => {}, []) // do nothing
   return (
     <DialogRoot 
       static // this is will do the trick
       isOpen={open}
       open={open}
       onClose={closeWorkAround}
     >
       
        // rest of the requiredComponents
     </DialogRoot>
   )
}
`

sample codesandbox

[ianizaguirre]

Bumping this, as I am in the same situation, I would like a built-in way for disabling outside click.