React doesn't play nice with inert property

[robdodson]

Example: https://www.webpackbin.com/bins/-KmmTaOzo6tSQqTeIv2H

React will ignore attempts to set the inert prop because it doesn't allow setting non-standard or experimental props on a node. https://facebook.github.io/react/warnings/unknown-prop.html

The workaround is to use the node's ref to set the inert attribute instead.

return <div ref={node => node && node.setAttribute('inert', '')} />

[robdodson]

Closing this as it's a React specific issue and I just wanted to document the workaround. You can see the discussion on React allowing custom attributes/properties here: facebook/react#140

[pimterry]

Just to extend this a little, if you want conditional inertness in React you need something more like:

<div
  ref={node => node && (shouldBeInert ?
    node.setAttribute('inert', '') : node.removeAttribute('inert')
  )}
/>

[robdodson]

Thank you Tim!

[panmona]

I am receiving node.setAttribute is not a function when I try to use this. Any idea on how to solve this?

[bkardell]

@maracuja-juice you're getting this following @robdodson's example ?

hey @robdodson - the link above showing a functional snip at https://www.webpackbin.com/bins/-KmmTaOzo6tSQqTeIv2H appears to be gone

[panmona]

@bkardell I'm using pimterry's example but I guess I will have the exact same behaviour if I would use the original suggestion as they're not that different.

[bkardell]

Can you share any running code? Can you add a debugger and see what node is there?

[robdodson]

Hm this sounds like an issue with how @maracuja-juice is using refs in React. I'm not super familiar with React but maybe in newer versions the ref syntax has changed?

[defnotrobbie]

i'd just like to add that the following works for both adding and removing inert in React without using refs or DOM methods. note that the true assignment is empty string and the false assignment is null. the true assignment can be any string as far as i can tell. the false assignment can be null, undefined, or false.

<div inert={inertCondition ? '' : null} />

[miloxeon]

If you're by any chance using React with TypeScript and Linaria, do this:

const InertElement = styled.div<{ inert?: string | null }>`
   /* your styles here */
`

Then, as @defnotrobbie suggested, you can use inert conditionally, and TypeScript will still be happy because we defined an additional prop:

<InertElement inert={inertCondition ? '' : null} />

[LarsEjaas]

If anyone needs a workaround until this is implemented I have solved it like this:

<div inert={disabled? "" : undefined}

inert undefined will not pass inert to the underlying DOM element and inert="" will pass to the DOM node and works like inert={true}

then:

declare global {
//TODO: remove this when inert is supported in React types
  namespace JSX {
    interface IntrinsicAttributes {
      /**
       * Boolean attribute indicating that the browser will ignore the element.
       *
       * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert MDN Web Docs}
       */
      inert?: "";
    }
  }
}

[yangshun]

Declaring on namespace JSX did not work for me, but this did:

declare module 'react' {
  interface HTMLAttributes<T> extends DOMAttributes<T> {
    /**
     * Boolean attribute indicating that the browser will ignore the element.
     *
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert MDN Web Docs}
     */
    inert?: '';
  }
}