Closed aaronabf closed 1 year ago
Hi @aaronabf, when enabling manual control of the floating element display, it is normal that useOutsideClick()
will not work, because at this time the floating element should be completely static, and all display or not is completely controlled by the user.
If you want to using useOutsideClick()
, you can refer to the following example. First, you need to import useOutsideClick
on @headlessui-float/react
, and then bind the Ref of the button (buttonRef) and the floating element (floatingRef). However, the Ref of the floating element cannot be bound to <Popover.Panel>
, and you can add a <div>
inside. <Popover.Panel>
needs to add static
to set it as a static element.
import React, { useRef, useState } from 'react'
import { Popover } from '@headlessui/react'
// import `useOutsideClick()` on '@headlessui-float/react'
import { Float, useOutsideClick } from '@headlessui-float/react'
export default function Example() {
const buttonRef = useRef(null)
const floatingRef = useRef(null)
const [open, setOpen] = useState(false)
const toggleMenu = () => setOpen(!open)
// on click outside of floating element to close
useOutsideClick([buttonRef, floatingRef], () => {
setOpen(false)
buttonRef.current.focus()
}, open)
return (
<div className="flex flex-col gap-2">
<button ref={buttonRef} className="p-3 border w-[400px] focus:ring" onClick={toggleMenu}>
not popover button
</button>
<Popover>
<Float show={open}>
<Popover.Button className="p-3 border w-[400px] focus:ring">
popover button
</Popover.Button>
{/* add `static` */}
<Popover.Panel static>
{/* must set ref={floatingRef} into inner, don't set to `<Popover.Panel>` */}
<div ref={floatingRef} className="p-3 border w-[400px]">
popover panel
<input type="text" placeholder="typeing..." className="ml-2" />
</div>
</Popover.Panel>
</Float>
</Popover>
</div>
)
}
Use Version Use version when bugs appear:
Describe the bug
In a Popover, when the prop
show
is specified, the default behavior is disabled. In particular, the Popover's button does not work anduseOutsideClick
also is not enabled. It is a common use case to want to provide additional showing functionality on top of the existing functionality. For example, we have 3 instances in our codebase where an outside event should close the popover.To Reproduce