Cannot set MDBSelect controlled component value to an empty


Topic: Cannot set MDBSelect controlled component value to an empty string

tgolen pro premium priority asked 3 weeks ago

Expected behavior

  1. Update MDBSelect's value to an empty string via useState hook
  2. The select option with the value of an empty string should be selected.

Actual behavior

The selected option does not change.

Resources (screenshots, code snippets etc.)

This sample code is adapted slightly from https://mdbootstrap.com/docs/react/forms/select/#subsection-single-selection to include an option with an empty string as a value.

It behaves as expected if the value -1 (or any other value besides an empty string) is used for the "Select One" value.

export default function App() {
  const [selectValue, setSelectValue] = useState(4);
  const [selectData, setSelectData] = useState([
    { text: 'Select One', value: "" },
    { text: 'One', value: 1 },
    { text: 'Two', value: 2 },
    { text: 'Three', value: 3 },
    { text: 'Four', value: 4 },
    { text: 'Five', value: 5 },
  ]);

  return (
    <>
      <MDBSelect
        data={selectData}
        label="Example label"
        value={selectValue}
        onChange={(e) => {
          setSelectValue(e.value);
        }}
      />

      <MDBBtn color="link" type="button" onClick={() => setSelectValue("")}>
        Reset
      </MDBBtn>
    </>
  );
}

Mateusz Lazaru staff answered 3 weeks ago

Thank you for reporting this. I'm adding a task to fix the issue.


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: Pro
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 9.0.0
  • Device: Macbook Pro
  • Browser: Chrome
  • OS: OSx
  • Provided sample code: No
  • Provided link: Yes