Closing the file upload window closes the parent modal
Closing the file upload window closes the parent modal with the “dialog” role.
Imagine you opened a modal window with a form, filled in a bunch of data, and at the bottom you see a field for uploading a file (for example, optionally, your avatar), you opened the file upload window, and then changed your mind and clicked Cancel, assuming that only the file upload window would close.
Instead, the modal closes along with the form. And your data.
So, it turns out that the cancel event from the native file selection window, which opens when you click on <input type="file" />, pops up in the parent <dialog /> or the element with this role (role="dialog").
And if you set the onCancel handler on this element, it will be executed. Apparently, initially, when this bug first appeared, the cancel event not only triggered the handler, but also naturally closed the dialog - https://stackoverflow.com/questions/76372090/cancel-input-file-close-dialog-element. Now this behavior has been fixed, but the handler is still called - https://jsfiddle.net/artabr/b6k4r19o/.
Why this is done is not entirely clear, because the nested dialog is cancelled, which we essentially do not even render and do not influence in any way. And the event is triggered in the parent, in the same place as its own cancellation event. The only positive thing is that the target in the event still points to our input and at least allows us to filter this event and not perform the actions that we perform when closing the main dialog.
The behavior in my opinion is very similar to a bug, at least it is extremely non-obvious.
And it all started with the harmless addition of role="dialog" - thanks to WCAG 😁