onclose for Dropdown

[sylv3rblade]

Summary

Brief explanation of the feature.

similar to what is currently available to Modal that way we can hook functions when a Dropdown is closed

Basic example
If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.

<script lang="ts">
function onclose() {
  console.log('Dropdown instance got closed')
  // do request based on what's selected from the closed dropdown
}
</script>

<Dropdown {onclose}>
  <DropdownItem>snip..</DropdownItem>
  <DropdownItem>snip..</DropdownItem>
</Dropdown>

<Dropdown {onclose}>
  <DropdownItem>snip..</DropdownItem>
  <DropdownItem>snip..</DropdownItem>
</Dropdown>

Motivation
Why are we doing this? What use cases does it support? What is the expected outcome?

We're using Dropdown in a similar case to MultiSelect (which has an onchange) but without the input

[jjagielka]

HTML standard defines that popover elements issue beforetoggle and toggle events. Why don't you use those ones?

<script>
  function ontoggle(ev) {
   if (ev.newState === 'closed') {
     // do what you want when dropdown closes
  }
 }
</script>
<Dropdown {ontoggle} ...>

[shinokada]

@jjagielka Thanks for the feedback! You're absolutely right that ontoggle follows the HTML standard. I'll keep onclose as a convenience wrapper for the common case where users only need to handle closing. Both approaches will be documented with examples so developers can choose what works best for their use case.

• Onclose
• Ontoggle

[jjagielka]

If you added 'onclose' in the 'Popper' you don't need to explicitly pass it in 'Dropdown'. It will be passed via 'restProps'.

[shinokada]

You're right that it would work via restProps, but explicitly listing onclose in the props improves discoverability and developer experience. Users can see available props through IDE autocomplete, TypeScript types, and documentation without needing to dig into the Popper implementation. It also makes the component's public API more clear and maintainable.