Bug: Player Adds Inert Attribute to All Tags Outside the Player on an Error

[danrossi]

Is there an existing issue for this?

• I have searched the existing issues

Which package(s) or projects are affected?

HTML (@videojs/html)

Browser/OS/Node environment

Browser: Brave
OS: Windows

Description

I've discovered when I am trying to add a modal-error-dialog to the player for something else to display a message. When there is a player error the player is adding inert attributes to all wrapping layers and tags. Making anything outside the player not clickable. I'm not sure how to prevent it other than to not use the dialog component.

I updated and meant the error dialog.

Reduced test case

https://jsfiddle.net/danrossi303/wrgtmcay/4/

Steps to reproduce

1. add an error dialog component https://videojs.org/docs/framework/html/reference/error-dialog
2. use a non existing source to trigger an error
3. inert attributes are added and nothing is clickable

Current Behavior

inert attributes are being added to elements outside the player in the fiddle is happening to the script tags for some reason. In local tests it's in the main page container layer.

Expected Behavior

Leave elements outside the player alone.

Errors

No response

What version of the package are you using?

v10.0.0-rc.2

[github-actions]

Thanks for the reproducible report. In @videojs/html@10.0.0-rc.2, the built-in <media-error-dialog> scopes background isolation to the player container, so content outside the player should remain interactive. This is covered by the browser test for an outside-page button.

One distinction may explain the result: a standalone <media-alert-dialog> is intentionally document-modal while it is open, so it will inert its background. Could you share the player/alert-dialog markup and module imports from the running page, and confirm whether the alert dialog remains open when the media error fires? That will tell us whether this is a regression in the error dialog or expected modality from the additional alert dialog.

References: Alert Dialog and Error Dialog.

[danrossi]

Workaround

https://jsfiddle.net/danrossi303/wrgtmcay/9/

A timeout is needed to wait for the error dialog as there is no event to know when its open and the inert attrs are added.

      this.mediaElement.addEventListener("error", () => {

        setTimeout(() => {
      errorDialog.removeAttribute("data-open");
      errorDialog.style.display = "none";
      document.body.querySelectorAll("[inert]").forEach((el) => {
        el.removeAttribute("inert");
      });
    }, 100);

      });

[javierarams]

Found the cause. Your <script src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video.js"> has no version pinned. I checked what jsdelivr actually serves for that URL. It resolves to 10.0.0-beta.32, an old build.

In that version, the error dialog itself gets marked inert, not just its backdrop. Since inert applies to all children too, even the dialog's own OK button becomes unreachable. That matches what you are seeing.

I tested the same markup against the current release, 10.0.0-rc.2, using the new @videojs/cdn package. There, only the backdrop gets inert. The dialog and its OK button stay fully interactive. So this looks fixed already in the current release.

Can you try pinning your script tags to a specific current version instead of the unversioned CDN path? Something like:

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/video.js"></script>

That should also keep you from silently picking up a stale cached build again in the future.