Document using HTML dialog element

[o-t-w]

Modals/Dialogs are very common on the web. Now that the HTML dialog element has full cross-browser support it would be great to see documentation around how to use this in React as it is far from obvious. In the current docs it says "instead of exposing open() and close() methods on a Dialog component, pass an isOpen prop to it." Should people avoid using the showModal() function? Is it necessary to use portals when using a HTML dialog element?

Such a common UI task should be clearly documented.

<dialog> used to have some accessibility concerns but all of those have been addressed. It's now a much better option than implementing your own dialog. It has many accessibility features like 'inert' built-in.

[o-t-w]

This is an example of the browser offering something really useful with lots of built-in behaviour and then the idiomatic React way of doing things making it 1000% harder to actually make use of it...

[o-t-w]

This is my current approach https://codesandbox.io/s/html-dialog-r0uxmr

[gaearon]

In the current docs it says "instead of exposing open() and close() methods on a Dialog component, pass an isOpen prop to it." Should people avoid using the showModal() function? Is it necessary to use portals when using a HTML dialog element?

This line doesn't refer to the HTML <dialog>, it refers to building your own Dialog component (one way or the other).

then the idiomatic React way of doing things making it 1000% harder to actually make use of it...

React does not do anything special with the <dialog> tag so I don't see how React makes anything "harder" than it is in the browser? You have the browser API at your disposal.

I agree it would be good to document how to integrate them well!

[lifeiscontent]

@gaearon I've spent time fighting some conventions in React, I believe the open property on a dialog should have an equivalent defaultOpen there are also some unique behaviors of the dialog element that I don't think have been in the web before until it was implemented. specifically if you call .close() this method modifies properties of the dialog

as well as if you call .showModal() or .show() and the open property has already been defined, the browser throws exceptions. trying to build a dialog that maintains the conventions of react has been quite challenging around controlled/uncontrolled states.

also, in scenarios where events are fired such as how the dialog behaves when it has a form outlined here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#usage_notes

it seems when you click on buttons they will internally call close() which will remove the open attribute, so without some kind of normalization via the SyntheticEvent system in React, trying to keep the open property in sync is one really tough problem to solve in user land.

fwiw, this is an example of how I'd expect a dialog element in React to work out of the box.

https://codesandbox.io/s/html-dialog-forked-slebi6