React

935 readers

1 users here now

A community for discussing anything related to the React UI framework and it's ecosystem.

https://react.dev/

Wormhole

[email protected]

Icon base by Skoll under CC BY 3.0 with modifications to add a gradient

founded 1 year ago

MODERATORS

Ategon

cufta22

Berserker

Controlled vs uncontrolled (self.react)

submitted 1 year ago* (last edited 1 year ago) by pastelmind to c/react

2 comments fedilink hide all child comments

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

you are viewing a single comment's thread
view the rest of the comments

[–] beefsquatch 1 points 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