Popover open event triggers onclose handler

[EzzatOmar]

Describe the bug
Popover open event triggers onclose handler.

To Reproduce
Steps to reproduce the behavior:

 const { isOpen, onClose, onToggle } = createDisclosure()


return (
    <>
      <Popover 
        placement="right" 
        opened={isOpen()} 
        onClose={onClose}
        closeOnBlur={false} 
      >
        <PopoverTrigger as={Button}>
        {/* without e.stopPropagation() the Popover will open and close  /*}
      <Button variant="subtle" colorScheme="neutral" mr="$2" onClick={(e:MouseEvent) => {onToggle(); e.stopPropagation()}}>
        Trigger
      </Button>

        </PopoverTrigger>
        <PopoverContent>
          <PopoverBody>Are you sure you want to have that milkshake?</PopoverBody>
        </PopoverContent>
      </Popover>
    </>
  );

Expected behavior
If the open event should not trigger the close handler. => The Popover remains open.

Desktop (please complete the following information):

• OS: [OSX]
• Browser [Brave]

[fabien-ml]

Hi, you don't have to use createDisclosure and an inner Button to trigger the popover. PopoverTrigger is the button.

Your example should be written like this:

function App() {
  return (
    <>
      <Popover placement="right" closeOnBlur={false}>
        <PopoverTrigger
          as={Button}
          variant="subtle"
          colorScheme="neutral"
          mr="$2"
        >
          Trigger
        </PopoverTrigger>
        <PopoverContent>
          <PopoverBody>
            Are you sure you want to have that milkshake?
          </PopoverBody>
        </PopoverContent>
      </Popover>
    </>
  );
}

The controlled syntax with createDisclosure is when you want an external button to control the popover:

function ControlledExample() {
  const { isOpen, onClose, onToggle } = createDisclosure();

  return (
    <>
      <Button variant="subtle" colorScheme="neutral" mr="$2" onClick={onToggle}>
        Trigger
      </Button>

      <Popover 
        placement="right" 
        opened={isOpen()} 
        onClose={onClose}
        closeOnBlur={false} 
      >
        <PopoverTrigger as={Button}>Popover Target</PopoverTrigger>
        <PopoverContent>
          <PopoverArrow />
          <PopoverCloseButton />
          <PopoverHeader>Confirmation!</PopoverHeader>
          <PopoverBody>Are you sure you want to have that milkshake?</PopoverBody>
        </PopoverContent>
      </Popover>
    </>
  );
}