如何手动打开Headless UI的Popover组件？

我正在运营一个电商网站，需要在用户将商品添加到购物车时，手动打开作为购物车的Popover组件。目前使用的是Tailwind旗下的Headless UI，以下是我尚未完成的代码：

export default function Cart() {
  const {isCartOpen, openCart, closeCart} = useCartUI();
  const {lines, totalQuantity} = useCart();

  return (
    <Popover className="ml-4 flow-root text-sm lg:relative lg:ml-8">
      {({open}: {open: boolean}) => {
        if(!open) closeCart();
        return (
          <>
            <Popover.Button
              className={clsx(
                'flex h-[2.4rem] items-center rounded-sm bg-darkGray px-3 py-2 text-sm font-bold duration-150',
                open ? "bg-opacity-20" : "bg-opacity-0 hover:bg-opacity-10",
              )}
            >
              <span className="mr-2">Kurv</span>
              <ChevronDownIcon className={clsx(open && 'rotate-180')} />
            </Popover.Button>

            {isCartOpen && (
              <Popover.Panel static className="absolute inset-x-0 top-16 mt-px bg-white pb-6 shadow-lg sm:px-2 lg:top-full lg:left-auto lg:right-0 lg:mt-3 lg:-mr-1.5 lg:w-80 lg:rounded-lg lg:ring-1 lg:ring-black lg:ring-opacity-5">
                <CartHeader numLines={lines.length} />
                {totalQuantity === 0 ? (
                  <CartEmpty />
                ) : (
                  <>
                    <CartItems />
                    <CartFooter />
                  </>
                )}
              </Popover.Panel>
            )}   
          </>
        )
      }}
    </Popover>
  );
}

Headless UI的Popover支持通过open prop手动控制显示状态，只需将自定义的isCartOpen状态与Popover绑定，同时同步状态切换逻辑即可实现需求。修改后的代码如下：

export default function Cart() {
  const { isCartOpen, openCart, closeCart } = useCartUI();
  const { lines, totalQuantity } = useCart();

  return (
    <Popover 
      className="ml-4 flow-root text-sm lg:relative lg:ml-8"
      open={isCartOpen}
      onClose={closeCart}
    >
      {({ close }) => {
        return (
          <>
            <Popover.Button
              className={clsx(
                'flex h-[2.4rem] items-center rounded-sm bg-darkGray px-3 py-2 text-sm font-bold duration-150',
                isCartOpen ? "bg-opacity-20" : "bg-opacity-0 hover:bg-opacity-10",
              )}
              onClick={() => isCartOpen ? closeCart() : openCart()}
            >
              <span className="mr-2">Kurv</span>
              <ChevronDownIcon className={clsx(isCartOpen && 'rotate-180')} />
            </Popover.Button>

            <Popover.Panel static className="absolute inset-x-0 top-16 mt-px bg-white pb-6 shadow-lg sm:px-2 lg:top-full lg:left-auto lg:right-0 lg:mt-3 lg:-mr-1.5 lg:w-80 lg:rounded-lg lg:ring-1 lg:ring-black lg:ring-opacity-5">
              <CartHeader numLines={lines.length} />
              {totalQuantity === 0 ? (
                <CartEmpty />
              ) : (
                <>
                  <CartItems />
                  <CartFooter />
                </>
              )}
            </Popover.Panel>   
          </>
        )
      }}
    </Popover>
  );
}

• 给Popover绑定open={isCartOpen}，让Popover的显示状态完全由自定义的购物车状态控制，调用openCart()时即可自动打开Popover。
• 添加onClose={closeCart}，确保用户点击Popover外部或按ESC关闭时，同步更新isCartOpen状态。
• 修改Popover.Button的点击逻辑，手动切换isCartOpen状态，替代原有的依赖Popover内部状态的逻辑。
• 将所有依赖Popover内部open状态的样式、图标旋转逻辑，替换为isCartOpen，保证状态统一。

内容的提问来源于stack exchange，提问作者haveman