Error when using `inert` attribute with Typescript

Question

I have created a vanilla create-react-app using the Typescript template.
I have added the line:

<dialog inert></dialog>

And the app won't even run because typescript is throwing an error saying:

ERROR in src/App.tsx:9:15 TS2322: Type '{ children: never[]; inert: true; }' is not assignable to type 'DetailedHTMLProps<DialogHTMLAttributes, HTMLDialogElement>'. Property 'inert' does not exist on type 'DetailedHTMLProps<DialogHTMLAttributes, HTMLDialogElement>'.

I would like to fix it instead of ignore it, but even ignoring doesn't seem to work.

// @ts-ignore
return (<dialog inert></dialog>);

Answer 1

One low-effort way to work around the fact that React (as of writing) does not yet have type definitions for the inert attribute is to wrap it into an object and then destructure it back onto your element:

<dialog
    // A silly workaround to use `inert` until https://github.com/facebook/react/pull/24730 is merged.
    {...{ inert: isInert ? '' : undefined }}
>
    Oh, hi
</dialog>

While positively silly, this should short-circuit any specific TypeScript and ESLint complaints and allow you to use it. Note that JSX itself might still complain at you if this is the only attribute on your element, and your element has no children. Why exactly one would create an empty, inert element beats me, but sips tea that's none of my business.

---

A slightly more robust solution would be a combination of a few things.

To make TypeScript happy, you can add (or add to) a declarations.d.ts file for your project, stubbing in a temporary definition for the inert attribute:

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    /**
     * Indicates that the browser will ignore this element and its descendants,
     * preventing some interactions and hiding it from assistive technology.
     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert
     * @todo Remove this stub declaration after https://github.com/facebook/react/pull/24730 is merged.
     */
    inert?: '';
  }
}

If you're using ESLint, you can add an exception for inert in your config file (.eslintrc or similar) via the react/no-unknown-property rule:

rules: {
    // Allows the use of the `inert` attribute until https://github.com/facebook/react/pull/24730 is merged.
    'react/no-unknown-property': ['error', { ignore: ['inert'] }],
}

---

In both of these solutions, we're forced to use the slightly odd syntax of passing inert an empty string (for true) or undefined (for false). This feels a bit clunky compared to attributes like disabled, which can directly accept boolean values. Unfortunately, using booleans this way is syntactical sugar that React adds to supported attributes, so we won't get that particular benefit for inert until it's supported natively.