Do you prefer your modal component (<dialog>, <Modal>, etc.) to be controlled or uncontrolled?

Uncontrolled: When I use the HTML native <dialog>, I need to access methods on HTMLDialogElement using a ref. This feels uncomfortable and not idiomatic React.

Controlled: I prefer using a boolean prop to control the open/closed state of the dialog. However, then I need to handle some features like Close on ESC key, which may otherwise cause the open/closed state to desync from the actual dialog state. I also have to be careful about using other HTML features that may close the dialog, e.g. <button formmethod=“dialog”>

altogether and instead use “legacy” modals built with carefully styled <div>s. But then I give up on many of the nice features of <dialog>, such as tab focus containment and accessibility.

What is your preferred way of using modals? Controlled vs uncontrolled? <dialog> vs <div>s?

Edit: Lemmy dislikes angle brackets inside `` :(

  • anon232@lemm.eeEnglish
    2·
    10 months ago

    Personally I use controlled, I typically create my own custom components that wrap a Dialog compoenent. These custom components will have props for thing such as the message to display, title, whether to show it or not, and an onClose callback. The onClose callback will be emitted from the custom component, which you can code to get called regardless of what method the user uses to close the dialog, then the parent component would simply toggle the boolean state of the custom dialog.