search

mdn / content

The content behind MDN Web Docs
https://developer.mozilla.org
Other
9.16k stars 22.46k forks source link

Description of how inert of .showModal() works does not cover how it behaves with iframe #35189

Open tounsoo opened 2 months ago

tounsoo commented 2 months ago

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal

What specific section or headline is this issue about?

Missing section

What information was incorrect, unhelpful, or incomplete?

Needs more description or explanation of how inert works for use cases such as using .showModal() from inside an iframe.

Iframe usage has 2 main cases:

In the case of domain content, I believe it is working correctly, but for using iframe to scope a local content, this isn't covered well. A good example of this is Storybook use case.

What did you expect to see?

Do you have any supporting links, references, or citations?

https://matrix.to/#/!AGetWbsMpFPdSgUrbs:matrix.org/$CnD20n29QzpExnykMFkfG17F1ZKq8aEBRTk-vMNCBkA?via=matrix.org&via=mozilla.org&via=igalia.com

Do you have anything more you want to share?

No response

MDN metadata

Page report details * Folder: `en-us/web/api/htmldialogelement/showmodal` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/htmldialogelement/showmodal/index.md * Last commit: https://github.com/mdn/content/commit/b71d118ffc6d72b77efad9661110fcc9ede464eb * Document last modified: 2024-07-25T14:22:56.000Z
Josh-Cena commented 2 months ago

Could you post code showing what the actual behavior is and what your expected behavior is? You meant that showModal behaves differently for cross-origin iframes vs. same-origin iframes, which seems expected.

tounsoo commented 2 months ago

Actual and expected behavior is same but I found that out after digging a lot into how .showModal() worked.

My use case was that I made a Dialog component(react) using

and while doing so, I used Storybook to test the component.

Because Storybook uses iframe to isolate and scope the preview of the code vs the rest of the Storybook UI, when .showModal() was triggered, only the content inside the iframe was inert but I was able to tap out into the Storybook UI controls.

UPDATE: here's my Storybook link to the Dialog component

UPDATE2: If you tab multiple times, you will see that the focus moves out into the Storybook UI which I thought it was my bug and went down the rabbit hole to find out it was expected behavior.

tounsoo commented 2 months ago

@sideshowbarker 👍