CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
sookie
sookie

Reputation: 2517

Disable spellcheck on all material-ui components

Is there a way to globally disable spellcheck on material-ui components?

Prior to using the material-ui library, I had used the following snippet to disable spellcheck on all newly-created DOM elements:

const disableSpellCheck = function(mutations) 
{
    const mutationCount = mutations.length;

    for (let i = 0; i < mutationCount; i++) {
        const mutation = mutations[i];
        if (mutation.attributeName === "spellcheck") {
            const addedNodes = mutation.addedNodes;
            const nodeCount = addedNodes.length;

            for (let n = 0; n < nodeCount; n++) {
                addedNodes[n].setAttribute("spellcheck", "false");
            }
        }
    }
}

const observer = new MutationObserver(disableSpellCheck);

observer.observe(document.getElementById('root'), {
    childList: true, 
    subtree: true,
    attributes: true, 
    attributeFilter: ['spellcheck']
});

This does not seem to work with components within material-ui. Because it is essential that spellcheck be disabled app-wide, I'm looking for a solution that does not involve modifying the style of each component individually.

Upvotes: 6

Views: 5280

Answers (1)

Estus Flask
Estus Flask

Reputation: 222989

In order to do that, spellCheck prop should be provided to inputs.

This can be done in Material UI with:

<Input inputProps={{ spellCheck: 'false' }}/>

Default props can be applied to all inputs with a theme:

const theme = createMuiTheme({
  props: {
    MuiInput: { inputProps: { spellCheck: 'false' } }
  }
});

...

<MuiThemeProvider theme={theme}>...</MuiThemeProvider>

Upvotes: 13

Related Questions