Popover opens and closes immediately on target click

[web-padawan]

Problem

This issue can be observed in https://vaadin.com/docs/latest/components/popover#drop-down-field:

Popover opens on click and immediately closes. Changing the target to
The error in the console related to trapFocus() logic is not the reason but a consequence of early closing

Reproducible example

import { useState } from 'react';
import { Button } from '../../packages/react-components/src/Button.js';
import { Popover } from '../../packages/react-components/src/Popover.js';

export default function () {
  const [opened, setOpened] = useState<boolean>(false);

  return (
    <>
      <Button id="target">Click me</Button>
      <Popover
        for="target"
        trigger={['click']}
        opened={opened}
        onOpenedChanged={(e) => {
          console.warn(e.detail.value);
        }}
        onClosed={() => {
          setOpened(false);
        }}
      >
        Content
      </Popover>
    </>
  );
}

Note

This isn't related to the recent overlay refactorization as also affects 24.8 and 24.9 branches.

[web-padawan]

Adding the following to the onOpenedChanged fixes the issue for me:

setOpened(e.detail.value);

So the original problem in docs could be related to vaadin/docs#4470.

[web-padawan]

Closing as the docs example has been updated and the code in the original issue (without onOpenedChanged) is incorrect.