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

tgolen premium asked 1 day 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>
    </>
  );
}


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Premium
  • 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