MDBSelect controlled does not work


Topic: MDBSelect controlled does not work

piloos pro premium asked 3 months ago

Expected behavior

It should be possible to create a controlled select

Actual behavior

Controlled select does not work. You can set the initial value, but you cannot control the value from outside the select.

Resources (screenshots, code snippets etc.)

import React, { useState } from 'react';
import {
  MDBSelect,
  MDBSelectInput,
  MDBSelectOptions,
  MDBSelectOption,
  MDBContainer,
  MDBBtn,
} from 'mdbreact';

const LodePage = () => {
  const [ length, setLength ] = useState('12')

  const options = [12, 24, 36].map(value => ({
    text: `${value} months`,
    value: value.toString(),
  }))

  return (
    <MDBContainer>
      <h1>Lode's Test page</h1>
      <br/>
      <span>selected: {length}</span>
      <br />
      <MDBBtn onClick={() => setLength('12')}>Reset length to 12</MDBBtn>
      <br/>
      <MDBSelect label='Example label' getValue={(value) => setLength(value)}>
        <MDBSelectInput selected='Choose your option'/>
        <MDBSelectOptions>
          {options.map(option => <MDBSelectOption selected={length == option.value} key={option.value} value={option.value}>{option.text}</MDBSelectOption>)}
        </MDBSelectOptions>
      </MDBSelect>
      <br />

    </MDBContainer>
  )
}

export default LodePage;

Piotr Glejzer staff commented 3 months ago

Thanks for the report. I added a task to fix this.


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: 5.0.1
  • Device: Any
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No