Range Input render tag


Topic: Range Input render <form> tag

Gustavo Fuhr asked 3 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 3 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.


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 3 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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.13.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: No
  • Provided link: No