Dialog (Modal) form input difficult to get focus

[leezhian]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.10

What browser are you using?

Chrome

Describe your issue

I use your modal component. There is a button in this modal component. After clicking it, a new modal will be displayed. If the modal contains an input box, you cannot directly click the input box to get the focus.

Steps：

1. open DemoModal.
2. click 'open new Modal' button (show Demo2Modal)
3. click input (Demo2Modal), but can't get the focus.
   If I click the blank space of the Demo2Modal first, and then click the input box, I can get the focus.

I guess this problem should be related to the focus of the website.

Codes 👇🏻

// DemoModal.jsx
import { Fragment, useState } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import Demo2Modal from './Demo2Modal'

export default function Example(props) {
  const { onClose, open } = props
  const [show, setShow] = useState(false)

 return (<>
    <Transition.Root show={open} as={Fragment}>
      <Dialog as="div" className="relative z-10" onClose={onClose}>
        {/*  Ignore some codes */}
        <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                  <form action="#" method="POST">
                    <input
                      type="text"
                      name="company-website"
                      id="company-website"
                      className="block w-full flex-1 rounded-none rounded-r-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                      placeholder="www.example.com"
                    />
                  </form>
                </div>
                <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                  <button
                    type="button"
                    className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
                    onClick={() => setShow(true)}
                  >
                    open new Modal
                  </button>
                  <button
                    type="button"
                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
                    onClick={onClose}
                  >
                    Cancel
                  </button>
                </div>
              </Dialog.Panel>
           {/*  Ignore some codes */}
      </Dialog>
    </Transition.Root>
    <Demo2Modal open={show} onClose={() => setShow(false)} />
  </>)
}

// Demo2Modal.jsx
import { Fragment } from 'react'
import { Dialog, Transition } from '@headlessui/react'

export default function Example(props) {
  const { onClose, open } = props

  return (<>
    <Transition.Root show={open} as={Fragment}>
      <Dialog as="div" className="relative z-30" onClose={onClose}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in duration-200"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
        </Transition.Child>

        <div className="fixed inset-0 z-30 overflow-y-auto">
          <div className="flex min-h-full items-end justify-start p-4 text-center sm:items-center sm:p-0">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
              enterTo="opacity-100 translate-y-0 sm:scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                  <form action="#" method="POST">
                    <input
                      type="text"
                      name="company-website"
                      id="company-website"
                      className="block w-full flex-1 rounded-none rounded-r-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                      placeholder="www.example.com"
                    />
                  </form>
                </div>
                <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                  <button
                    type="button"
                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
                    onClick={onClose}
                  >
                    Cancel
                  </button>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition.Root>
  </>
  )
}

[HuuThongg]

I have the same problem as well, I noticed that the input element gets unfocused.

[ethanhoroschak]

same problem here as well - we are unable to click text inputs

[ayepRahman]

same issue as mentioned, i was using react-hook-form to set focus, end up coming to this thread and it seem to be headless UI modal issue.

[MilesNorton]

Upvoted

[cskim9410]

You can fix the problem by modifying the code as follows.
The modified part is to put Demo2Modal component into Dialog's children

// DemoModal.jsx
import { Fragment, useState } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import Demo2Modal from './Demo2Modal'

export default function Example(props) {
  const { onClose, open } = props
  const [show, setShow] = useState(false)

 return (<>
    <Transition.Root show={open} as={Fragment}>
      <Dialog as="div" className="relative z-10" onClose={onClose}>
        {/*  Ignore some codes */}
        <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                  <form action="#" method="POST">
                    <input
                      type="text"
                      name="company-website"
                      id="company-website"
                      className="block w-full flex-1 rounded-none rounded-r-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                      placeholder="www.example.com"
                    />
                  </form>
                </div>
                <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                  <button
                    type="button"
                    className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
                    onClick={() => setShow(true)}
                  >
                    open new Modal
                  </button>
                  <button
                    type="button"
                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
                    onClick={onClose}
                  >
                    Cancel
                  </button>
                </div>
              </Dialog.Panel>
           {/*  Ignore some codes */}
        <Demo2Modal open={show} onClose={() => setShow(false)} />
      </Dialog>
    </Transition.Root>
  </>)
}

[sghong3130]

#2983

[asivaneswaran]

Any updates on this? The fix is not even live and not on Vue either

[chronicadventure]

I had the same problem with vue. I did not have a nested modal however. My issue was caused because I had 2 different modals on the Dom. One was rendered in a parent component while another was rendered in a child component. I got around the issue by removing the one that was rendered from the child component.

Essentially I moved the dialog into a flexible component that can be triggered via a store. I then rendered the dialog once in the main vue component and used the store to show it and change it's contents.