MDBSelect reset

mnikam commented 5 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 5 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.