Material-ui: Spellcheck and lang props should be set on textfield or input element

Created on 10 Nov 2017 · 2Comments · Source: mui-org/material-ui

The <Input /> and <TextField /> component's props: _spellcheck_ and _lang_ should be set on the input and textfield respectively

[x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I would expect that spellcheck and lang props propagates down to the input or textfield elements within the respective components.

Rendered expected html looks something like this(Simplified):
```` html

</div>

<div/>
````

## Current Behavior

Currently when rendered the props are set on the wrapper when using ``<Input />`` or ``<TextField />`` . The props are not set on the input or textfield element.

Rendered html:
```` html
<div class="mui-root" spellcheck=true lang="nn">
  <div class="muiTextArea-root">
    <textarea />
  </div>

<h2>Steps to Reproduce (for bugs)</h2>

<p><!---<br />
    Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.<br />
    Include code to reproduce, if relevant (which it most likely is). </p>

<pre><code class="prettyprint">This codesandbox.io template _may_ be a good starting point: 
https://codesandbox.io/s/github/callemall/material-ui/tree/v1-beta/examples/create-react-app

If YOU DO NOT take time to provide a codesandbox.io reproduction, should the COMMUNITY take time to help you?
</code></pre>

<p>--><br />
Test the html in IE: <a rel="nofollow noopener" target="_blank" href="https://codepen.io/doff3n/pen/xPqgGR">https://codepen.io/doff3n/pen/xPqgGR</a> You may need to paste the text again</p>

<h2>Context</h2>

<p><br />
I am implementing a spellchecker where you should be able to switch between different spellchecking languages, In norway we have two different official written languages. It should also be possible to turn off the spellcheck. In chrome the value is inherited as according to <a rel="nofollow noopener" target="_blank" href="https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking"> spec</a>. A solution where I could set the props directly on the input element would work for me, or that the props are inherited down to the element.</p>

<h2>Your Environment</h2>

<p>| Tech         | Version |<br />
|--------------|---------|<br />
| Material-UI  |    1.0.0-beta.17    |<br />
| React        |    16.0.0     |<br />
| browser      |    IE11    |</p>

</div>
                        <div>
                                                        <span class="badge badge-primary">TextField</span>
                                                        <span class="badge badge-primary">discussion</span>
                                                        <div class="float-right">
                                <a class="text-muted" href="https://www.github.com/mui-org/material-ui/issues/9085" rel="nofollow noreferrer" target="_blank" onclick="dataLayer.push({'event': 'GAEvent', 'eventCategory': 'click', 'eventAction': 'source_bottom', 'eventLabel': 'Source Bottom', 'eventValue': undefined});">Source</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars2.githubusercontent.com/u/611783?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture">
                                <strong>Doff3n</strong>
                            </div>
                            <div class="col text-right">
                                                                                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="col-12 mb-4 best-comment">
                <div>
                    <h2 class="mb-3"><i class="fas fa-check mr-2"></i>Most helpful comment</h2>
                </div>
                <div class="card card-custom border-lg-success mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <p><strong>@sakulstra</strong> Is correct. We only automatically forward the most popular properties to the native input in order to keep the component size under control. If enough people have this use case, we can consider making it automatic.</p>

</div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars2.githubusercontent.com/u/3165635?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture">
                                <strong>oliviertassinari</strong>
                                <span class="text-muted ml-1">on 10 Nov 2017</span>
                            </div>
                            <div class="col text-right">
                                                                👍<span class="ml-2 mr-3">2</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-12">
                <div class="mb-4">
                    <ins class="adsbygoogle"
                        style="display:block"
                        data-ad-client="ca-pub-3835332123789605"
                        data-ad-slot="9295564578"
                        data-ad-format="auto"
                        
                        data-full-width-responsive="true"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>

<div class="col-12 d-flex align-items-center mb-4">
                                <h2>All 2 comments</h2>
                
                            </div>

<div class="col-12">
                                <div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <p>According to the docs you have to set inputProps via inputProps <a rel="nofollow noopener" target="_blank" href="https://material-ui-next.com/api/input/">https://material-ui-next.com/api/input/</a></p>

</div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars3.githubusercontent.com/u/4396533?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="sakulstra picture">
                                <strong>sakulstra</strong>
                                <span class="text-muted ml-1">on 10 Nov 2017</span>
                            </div>
                            <div class="col text-right">
                                                                👍<span class="ml-2 mr-3">1</span>
                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <p><strong>@sakulstra</strong> Is correct. We only automatically forward the most popular properties to the native input in order to keep the component size under control. If enough people have this use case, we can consider making it automatic.</p>

</div>

<div class="col-12">
                <div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown text-center helpful">
                        <div class="title">Was this page helpful?</div>
                                                                                                    <div class="mt-1" onMouseLeave="rating(272924428, 0);">
                                                                                                                        <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(272924428, 1);" onclick="rate(272924428, 1);"></i>
                                                                <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(272924428, 2);" onclick="rate(272924428, 2);"></i>
                                                                <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(272924428, 3);" onclick="rate(272924428, 3);"></i>
                                                                <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(272924428, 4);" onclick="rate(272924428, 4);"></i>
                                                                <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(272924428, 5);" onclick="rate(272924428, 5);"></i>
                                                                                    </div>
                        <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div>
                    </div>
                </div>
                <div class="mb-4">                   
                    <ins class="adsbygoogle"
                        style="display:block"
                        data-ad-client="ca-pub-3835332123789605"
                        data-ad-slot="3452512275"
                        data-ad-format="auto"
                        
                        data-full-width-responsive="true"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-4">

<div class="card card-custom issue-box">
            <div class="card-body pt-3 pb-5">
                <h2 class="mb-4">Related issues</h2>
                                                <div>
                    <strong>
                        <a href="/material-ui/112875583/changing-the-color-of-the-inputted-text-on-a-text-field">Changing the color of the inputted text on a text field</a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars2.githubusercontent.com/u/5413624?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="anthony-dandrea picture">
                    <strong class="pr-1" dir="ltr">anthony-dandrea</strong>
                                         · 
                    <span class="px-1" dir="ltr">3</span><span>Comments</span>
                                    </div>
                 <hr />
                                                <div>
                    <strong>
                        <a href="/material-ui/88390902/how-to-use-icon">How to use Icon ?</a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars3.githubusercontent.com/u/1390196?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="revskill10 picture">
                    <strong class="pr-1" dir="ltr">revskill10</strong>
                                         · 
                    <span class="px-1" dir="ltr">3</span><span>Comments</span>
                                    </div>
                 <hr />
                                                <div>
                    <strong>
                        <a href="/material-ui/135618993/core-replace-string-refs-with-callback-refs">[Core] Replace string refs with callback refs</a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars2.githubusercontent.com/u/344018?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="newoga picture">
                    <strong class="pr-1" dir="ltr">newoga</strong>
                                         · 
                    <span class="px-1" dir="ltr">3</span><span>Comments</span>
                                    </div>
                 <hr />
                                                <div>
                    <strong>
                        <a href="/material-ui/89769674/dialog-side-effects-body-overflow-hidden-property">[Dialog] Side effects (body overflow hidden property)</a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars2.githubusercontent.com/u/3909933?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="activatedgeek picture">
                    <strong class="pr-1" dir="ltr">activatedgeek</strong>
                                         · 
                    <span class="px-1" dir="ltr">3</span><span>Comments</span>
                                    </div>
                 <hr />
                                                <div>
                    <strong>
                        <a href="/material-ui/135387261/listitem-how-to-change-the-padding-of-listitem">[ListItem] How to change the padding of <ListItem /></a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars2.githubusercontent.com/u/14273378?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="chris-hinds picture">
                    <strong class="pr-1" dir="ltr">chris-hinds</strong>
                                         · 
                    <span class="px-1" dir="ltr">3</span><span>Comments</span>
                                    </div>
                                
            </div>
        </div>
        
        <div class="sticky-top pt-4">
            <ins class="adsbygoogle"
                style="display:block"
                data-ad-client="ca-pub-3835332123789605"
                data-ad-slot="3919948963"
                data-ad-format="auto"
                
                data-full-width-responsive="true"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>

<div id="ph-below-related-2" class="mt-4">
                <ins class="adsbygoogle"
                    style="display:block"
                    data-ad-client="ca-pub-3835332123789605"
                    data-ad-slot="3919948963"
                    data-ad-format="auto"
                    
                    data-full-width-responsive="true"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-4">
        
    </div>

</div>
		<div class="skyscraper-container">
			<ins class="adsbygoogle"
				style="display:block"
				data-ad-client="ca-pub-3835332123789605"
				data-ad-slot="7879185320"
				data-ad-format="vertical"
				data-full-width-responsive="true"></ins>
			<script>
				(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
	</div>

<div class="mt-5 spacer"></div>
<footer class="mt-5 pb-2 py-4 text-center mt-auto">
    <div class="container">
        <a class="navbar-brand logo mr-5" href="/">
            <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo">
            bleeping<strong>coder</strong>
        </a>

<div class="mt-4">
            bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners.        </div>
                <div>
            Source for this page: <a href="https://www.github.com/mui-org/material-ui/issues/9085" rel="nofollow noreferrer" target="_blank">Source</a>
        </div>
            </div>

<div class="container">
        <div class="row">
            <div class="col-sm-4 col-lg mb-sm-0 mb-5">
                <strong>Popular programming languages</strong>
                <ul class="list-unstyled mb-0 mt-2">
                    <li class="mb-2">
                        <a href="/python" dir="ltr">Python</a>
                    </li>
                    <li class="mb-2">
                        <a href="/javascript" dir="ltr">JavaScript</a>
                    </li>
                    <li class="mb-2">
                        <a href="/typescript" dir="ltr">TypeScript</a>
                    </li>
                    <li class="mb-2">
                        <a href="/cpp" dir="ltr">C++</a>
                    </li>
                    <li class="mb-2">
                        <a href="/csharp" dir="ltr">C#</a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-4 col-lg mb-sm-0 mb-5">
                <strong>Popular GitHub projects</strong>
                <ul class="list-unstyled mb-0 mt-2">
                    <li class="mb-2">
                        <a href="/microsoft/vscode" dir="ltr">vscode</a>
                    </li>
                    <li class="mb-2">
                        <a href="/numpy/numpy" dir="ltr">numpy</a>
                    </li>
                    <li class="mb-2">
                        <a href="/ant-design/ant-design" dir="ltr">ant-design</a>
                    </li>
                    <li class="mb-2">
                        <a href="/mui-org/material-ui" dir="ltr">material-ui</a>
                    </li>
                    <li class="mb-2">
                        <a href="/vercel/next-js" dir="ltr">next.js</a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-4 col-lg mb-0">
                <strong>More GitHub projects</strong>
                <ul class="list-unstyled mb-0 mt-2">
                    <li class="mb-2">
                        <a href="/rust-lang/rust" dir="ltr">rust</a>
                    </li>
                    <li class="mb-2">
                        <a href="/moment/moment" dir="ltr">moment</a>
                    </li>
                    <li class="mb-2">
                        <a href="/yarnpkg/yarn" dir="ltr">yarn</a>
                    </li>
                    <li class="mb-2">
                        <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a>
                    </li>
                    <li class="mb-2">
                        <a href="/JuliaLang/julia" dir="ltr">julia</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

<hr class="mb-5 mt-5">
    <div class="container text-muted">
        © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br />
        By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>.
    </div>
</footer>

</html>