Emit an event when component state changes

[livthomas]

Sometimes you need to know whether Popover or Menu is open in the setup function of a Vue.js component where it is used. But there's no way to directly get this information from these components right now as it is only accessible in a template via slot props.

I have found a workaround where I pass this value to a child component and then emit it from there like this:

  <Popover as="template" v-slot="{open}">
    <div class="template-card-details" :class="{'template-card-details--open': open}">
      <PopoverButton as="template">
        <TemplateCardDetailsButton :open="open" @update:open="onUpdateOpen" />
      </PopoverButton>
      ...
    </div>
  </Popover>

But it's not very convenient. It would be much better if something like this was possible:

  <Popover @open="onOpen">
      ...
    </div>
  </Popover>

It could be open event in Vue.js and onOpen callback prop in React where open value would be passed. Or there could be two separate events, one for opening and another one for closing.

I think not only open value but all internal state of all Headless UI components that could potentially be of interest to the "outside world" should be propagated out this way.

[livthomas]

It looks like multiple people already raised this issue for individual components:

1. Add 'onClose' event to Popover #525
2. Allow access to disclosure state in code #391

So it's definitely something worth looking at.

[alexmillman23]

Guess it wasn't worth it.