Dialog: Fixed Button to Toggle Dialog Open/Close

[hjaber]

I'm trying to create a fixed button that can open or close a <Dialog>

I have an onClick handler that correctly changes the state of the dialog to close but something fires afterwards and sets the dialog state back to open.

There are a few work arounds but they all involve code duplication. I'm hoping to find a solution where one button can toggle the dialog

        <button
          type="button"
          onClick={()=>setIsOpen(!isOpen}
        >
          toggle dialog
        </button>

https://codesandbox.io/s/headless-ui-playground-forked-rwzqqy?file=/src/App.js:393-412

[Ojay]

I have run into this too... setup is a menu button thats position: fixed; and is used to open and close the <Dialog>.

The Dialog doesn't close because of its onClose function butting heads with the onClick event. I think the onClose sets the state to false just before the setIsOpen(!isOpen} runs and switches state to the opposite value... which is now open/true.

I've hacked my way around it before, although I'm struggling to do so again now, and so would love to know if there's a recommended approach to handle this?

[hjaber]

I ultimately switched to Popover from Dialog and exposed the close prop. The popover button remains fixed and you are able to add an overlay if necessary. It seems to be the solution I was looking for.

<Popover>
      <Popover.Button>Terms</Popover.Button>
      <Popover.Panel>
        {({ close }) => (
          <div
            onClick={async () =>close()}}
          >
           <a href="/">home</a>
          </div>
        )}
      </Popover.Panel>
    </Popover>
  )
}

[maltoze]

use onMouseUp instead of onClick.

<button type="button" onMouseUp={() => setIsOpen(!isOpen)}>
  toggle dialog
</button>