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 `` :(

  • beefsquatch
    link
    fedilink
    arrow-up
    1
    ·
    1 year ago

    I usually wrap Reach’s Dialog https://reach.tech/dialog so things like focus, esc, scroll, etc. are all handled out of the box. It’s a controlled component that uses a div and Portal rather than a dialog tag