Topic: Range Input render <form> tag
Gustavo Fuhr free asked 5 years ago
Expected behavior
MDBInputRange renders a <form>
html element. When using the input range insde a high level form, the browser shows an error in console:
Warning: validateDOMNesting(...): cannot appear as a descendant of . in form (created by InputRange) in InputRange (at SegmentFilter.js:224) in div (at SegmentFilter.js:220) in FastFieldInner (created by Context.Consumer)
We have a strict QA policy and we cant deliver code with console warnings.
It would be nice that the input range renders tag by default (for backward compatibility), but if some prop is present avoid that render so it can be used inside a form without warnings.
Actual behavior MDBInputRange, renders the following html:
<form class="range-field"><input class="" min="0" max="100" type="range" value="53"><span class="thumb" style="height: 0px; width: 0px; top: 10px; margin-left: -6px; left: 143.1px;"><span class="value">53</span></span></form>
Resources (screenshots, code snippets etc.)
Konrad Stępień staff answered 5 years ago
Hi,
we will get to know about this problem and we will try to fix it as soon as possible.
Your regards, Konrad.
Gustavo Fuhr free answered 5 years ago
Hi, thanks for the response ... my code is huge, but I will try to put a snippet here with relevant lines
At high level I have this Formik form
<Formik ref={this.formRef} initialValues={this.getInitialValues(campaign)} onSubmit={(values) => { this.submitForm(values) }}>
<Form>
Inside this form I have the inputs, for example the input range:
<div>
<label>{ ... }</label>
<MDBRangeInput
min={0}
max={100}
value={ ... }
getValue={(value) => { ... }
/>
</div>
The Formik form renders a "form" html tag. When MDBRangeInput renders it also renders a "form" tag and here is the conflict. Im using other MDB components (input text, text area, select) and none of them renders de "form" tag, this only happens with MDBRangeInput
Please, let me know if you need more detail. Thanks!
Konrad Stępień staff answered 5 years ago
Hi @Gustavo Fuhr,
Can you send me your code? I can help you if you send me some the code from your project and you give me more data. I hope we fix your problem fast.
Your regards, Konrad.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.13.0
- Device: Desktop
- Browser: Chrome
- OS: Linux
- Provided sample code: Yes
- Provided link: No