MDBSelect controlled does not work


Topic: MDBSelect controlled does not work

piloos pro premium asked 4 years 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 4 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

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