Proposal to Extend useDismiss Hook with onDismiss Callback

[pascalrogalla]

Currently, the useDismiss hook in the floating UI does not support the passing of an onDismiss callback. As a result, when it's necessary to react to the dismissal of a dialog, developers are required to "abuse" the onOpenChange function for this purpose. This proposal suggests extending the props of the useDismiss hook to include an onDismiss callback. Additionally, it outlines the advantages that such an extension would offer.

Proposal:

The useDismiss hook is a vital tool in managing floating UI elements. However, its current implementation lacks support for an onDismiss callback. This omission necessitates unconventional workarounds, such as repurposing the onOpenChange function, to handle dismissal events effectively. To address this limitation and enhance the usability of the hook, I propose extending its props to include an onDismiss callback.

Advantages of Extending useDismiss with onDismiss Callback:

1. Clarity and Intent: Adding an explicit onDismiss callback clarifies the purpose of the hook and improves code readability. Developers can immediately discern the intended functionality without resorting to unconventional usage patterns.

2. Separation of Concerns: Separating dismissal logic into its dedicated callback promotes cleaner code architecture by adhering to the principle of single responsibility. Developers can isolate dismissal-related actions, enhancing maintainability and facilitating future modifications.

3. Enhanced Flexibility: Introducing an onDismiss callback empowers developers to execute custom actions in response to dismissal events. Whether it involves state updates, API calls, or UI transitions, this flexibility fosters creativity and enables tailored user experiences.

4. Consistency and Compatibility: By aligning the useDismiss hook with established patterns and conventions, such as the inclusion of callbacks for common interactions, this extension promotes consistency across codebases. Furthermore, it ensures compatibility with existing frameworks and libraries that rely on similar callback mechanisms.

5. Improved Error Handling: With an onDismiss callback, developers gain finer control over error handling and validation during dismissal operations. They can intercept errors, provide informative feedback to users, and gracefully handle exceptional scenarios, thereby enhancing the robustness of their applications.

Conclusion:

Extending the useDismiss hook with an onDismiss callback is a pragmatic enhancement that aligns with the principles of clarity, separation of concerns, flexibility, consistency, and error handling. By embracing this proposal, we can streamline development workflows, improve code quality, and empower developers to craft more intuitive and resilient user interfaces. I invite feedback and collaboration from the community to refine and implement this feature, enriching the floating UI experience for all users.

Thank you for considering this proposal.

[atomiks]

onOpenChange's reason string (third parameter) was created for this purpose, which also enables you to dismiss only when it matches a certain type rather than all types. It's not "abusing" it.

The only disadvantage to a dedicated onDismiss callback is that you need to check for multiple types of dismissal strings if you want to run it unconditionally, although it only requires 2-4 checks, depending on what's been enabled:

• outside-press
• escape-key
• reference-press (if enabled)
• ancestor-scroll (if enabled)

type OpenChangeReason =
  | 'outside-press'
  | 'escape-key'
  | 'ancestor-scroll'
  | 'reference-press'
  | 'click'
  | 'hover'
  | 'focus'
  | 'list-navigation'
  | 'safe-polygon';

https://floating-ui.com/docs/useFloating#onopenchange