Mdb-ui-kit: JS should not require textarea to be class=form-control

Created on 29 Oct 2017 · 9Comments · Source: mdbootstrap/mdb-ui-kit

The https://github.com/handsontable/handsontable library creates textarea under the hood.
As a user of this library, I have no control over its class.

When initializing bootstrapMaterialDesign, I get:
`````
Uncaught Error: Textarea element: requires class: form-control<br /> ``````</p> <p>I would suggest that if the <code>form-control</code> is not present, then <code>bootstrapMaterialDesign</code> just ignores it instead of raising an error.</p> </div> <div> <span class="badge badge-primary">enhancement</span> <span class="badge badge-primary">good first bug</span> <div class="float-right"> <a class="text-muted" href="https://www.github.com/mdbootstrap/mdb-ui-kit/issues/1254" 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://avatars.githubusercontent.com/u/360895?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture"> <strong>steren</strong> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">2</span> </div> </div> </div> </div> </div> <div class="col-12"> <div id="ph-above-best-comment"> </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 9 comments</h2> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>_"bootstrap-material-design": "4.0.0-beta.4"_</p> <p>Hello, this bug its still happening with input text & input email.</p> <p>Should just ignores it but i got the error and everything crash 😢 </p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/6190477?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="HectorLS picture"> <strong>HectorLS</strong> <span class="text-muted ml-1">on 8 Jan 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>the fix has not yet been released</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/5382443?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="FezVrasta picture"> <strong>FezVrasta</strong> <span class="text-muted ml-1">on 8 Jan 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Thanks by the fast replay 👍<br /> is there an approximate release date ?</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/6190477?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="HectorLS picture"> <strong>HectorLS</strong> <span class="text-muted ml-1">on 11 Jan 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I'm probably going to release a new beta once Bootstrap releases a new one as well.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/5382443?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="FezVrasta picture"> <strong>FezVrasta</strong> <span class="text-muted ml-1">on 11 Jan 2018</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>Perfect thank you so much !</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/6190477?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="HectorLS picture"> <strong>HectorLS</strong> <span class="text-muted ml-1">on 11 Jan 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@FezVrasta</strong>, does this one get fixed and released already? I agree it should just ignore it. Selectize.js automatically create textbox under the hood, and it broke everything.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/407708?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="chamnap picture"> <strong>chamnap</strong> <span class="text-muted ml-1">on 4 Apr 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>This should be already released AFAIK</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/5382443?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="FezVrasta picture"> <strong>FezVrasta</strong> <span class="text-muted ml-1">on 4 Apr 2018</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>Hey guys, I still got the same problem as you do/did. If I'm reading this forum rightfully, the problem should've been fixed but yet, still a ton of errors in my console log. Honestly, I'm not even sure it's about the bootstrap material design or my own project, but if you can help, please do so ! 😃 </p> <p>Here's my errors : </p> <p><img width="841" alt="console log errors" src="https://user-images.githubusercontent.com/26975834/38617587-6559fd84-3d65-11e8-890f-1d5dd4bd5506.png"></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/26975834?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="maximeCote819 picture"> <strong>maximeCote819</strong> <span class="text-muted ml-1">on 11 Apr 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I think you are using an outdated version</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/5382443?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="FezVrasta picture"> <strong>FezVrasta</strong> <span class="text-muted ml-1">on 11 Apr 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> </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(269358299, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(269358299, 1);" onclick="rate(269358299, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(269358299, 2);" onclick="rate(269358299, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(269358299, 3);" onclick="rate(269358299, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(269358299, 4);" onclick="rate(269358299, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(269358299, 5);" onclick="rate(269358299, 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 id="ph-above-related"></div> <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="/mdb-ui-kit/158140918/issues-with-angularjs-some-elements-works-others-don-t">Issues with AngularJS, some elements works, others don't</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/6190477?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="HectorLS picture"> <strong class="pr-1" dir="ltr">HectorLS</strong> · <span class="px-1" dir="ltr">6</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/mdb-ui-kit/209621025/jquery-3-it-s-supported">jQuery 3.* it's supported?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/17413819?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="snessnes picture"> <strong class="pr-1" dir="ltr">snessnes</strong> · <span class="px-1" dir="ltr">7</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/mdb-ui-kit/143179774/overlap-issue-using-ngmodel-in-angular2">Overlap issue using [(ngModel)] in Angular2</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/9392605?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="MasDevProject picture"> <strong class="pr-1" dir="ltr">MasDevProject</strong> · <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/mdb-ui-kit/570616725/build-error-selectors-may-not-contain-the-parent-selector">Build error: selectors may not contain the parent selector "&"</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/12170676?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ViRuSTriNiTy picture"> <strong class="pr-1" dir="ltr">ViRuSTriNiTy</strong> · <span class="px-1" dir="ltr">6</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/mdb-ui-kit/42705903/radio-buttons-not-showing-when-using-dynamic-dom">radio buttons not showing when using dynamic dom </a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/46201?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="hans-d picture"> <strong class="pr-1" dir="ltr">hans-d</strong> · <span class="px-1" dir="ltr">5</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/mdbootstrap/mdb-ui-kit/issues/1254" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <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> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>