MDBSelect reset


Topic: MDBSelect reset

mnikam asked 2 years ago

How can i reset the MDBSelect component based on some logic within the app? For example, if I had selected "Option 2", based on some conditional logic within the form, I want to clear the selection from the drop down, so user can select new options.

enter image description here


Konrad Stępień staff answered 2 years ago

Hi @mnikam,

I don't know if I fully understood the problem, but you want probably use multi-select component and if I click the option then option must be selected and disabled, yes?

So, you need to update the option after a click.

If the problem is with the single select itself then from what I see it has a problem with updating the data. One of the exits is probably creating several select and hiding them and showing them in succession using css

Best regards, Konrad.


mnikam commented 2 years ago

Hello Konrad,

Let me explain little better. I have a form with two MDBSelects. Let's say first one is ControlGroups and the second one is Meters. When I select an item from Control Group, I'm getting list of meters and populating Meter items. Now I have selected a meter and went back to Control Group to change my selection. Now when I retrieve meters that match the newly selected control group. Now i see the new meters in the Meters dropdown. But I'm not able to clear the meter I selected earlier.

Appreciate your help

Thanks Manohar

        <MDBRow>
          <MDBCol md="12">

            <div>
              <MDBSelect color="primary"
                required
                getValue={(e: any) => {
                  this.setState({
                    selectedControlGroup: e[0],
                    selectedMeter:""
                  });
                  debugger;
                  this.props.getMeters(e[0]);
                }}
              >
                <MDBSelectInput selected="Choose Control Group" />
                <MDBSelectOptions>
                  <MDBSelectOption disabled selected>Choose Control Group</MDBSelectOption>
                  {controlGroups.map((cg: DropDownSelectResponse) =>
                    <MDBSelectOption
                      key={cg.value}
                      value={cg.value}>
                      {cg.text}
                    </MDBSelectOption>
                  )}

                </MDBSelectOptions>
              </MDBSelect>
              <label>Control Group</label>
            </div>
            {
              (this.state.selectedControlGroup === "") ? (
                <div className="alert alert-danger" role="alert">
                  Please select a Control Group
                  </div>
              ) : (<></>)
            }
          </MDBCol>
        </MDBRow>

        <MDBRow>
          <MDBCol md="12">

            <div>
              <MDBSelect color="primary"
                required
                getValue={(e: any) => {
                  this.setState({
                    selectedMeter: e[0]
                  });
                }}
              >
                <MDBSelectInput selected="Choose Meter List" />
                <MDBSelectOptions>
                  {meters.map((mt: DropDownSelectResponse, idx: number) =>
                    <MDBSelectOption
                      selected={idx === 0}
                      disabled={mt.disabled}
                      key={mt.value}
                      value={mt.value}>
                      {mt.text}
                    </MDBSelectOption>
                  )}

                </MDBSelectOptions>
              </MDBSelect>
              <label>Meter List</label>
            </div>
            {
              (this.state.selectedMeter === "" || this.state.selectedMeter === "Choose Meter List") ? (
                <div className="alert alert-danger" role="alert">
                  Please select a Meter List
                  </div>
              ) : (<></>)
            }
          </MDBCol>
        </MDBRow>

Konrad Stępień staff commented 2 years ago

Hi @mnikam,

Can you send me also data from your states? Or can you make a snippet

Without output data, I can only guess how to restore a project without errors.

Best, Konrad.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.12.0
  • Device: Laptop
  • Browser: Google Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No