Topic: MDBSelect with empty list

japan priority asked 1 year ago


MDBselect with empty datalist doesn't work. It's a bad, when I have to load a list dynamically.

        <MDBSelect
        label='Example label'
        data={[]} />

Result: ERROR Cannot read properties of undefined (reading 'value') TypeError: Cannot read properties of undefined (reading 'value') at https://localhost:3000/static/js/bundle.js:377963:28 at https://localhost:3000/static/js/bundle.js:377979:7 at commitHookEffectListMount (https://localhost:3000/static/js/bundle.js:325795:30) at commitPassiveMountOnFiber (https://localhost:3000/static/js/bundle.js:327288:17) at commitPassiveMountEffects_complete (https://localhost:3000/static/js/bundle.js:327260:13) at commitPassiveMountEffects_begin (https://localhost:3000/static/js/bundle.js:327250:11) at commitPassiveMountEffects (https://localhost:3000/static/js/bundle.js:327240:7) at flushPassiveEffectsImpl (https://localhost:3000/static/js/bundle.js:329125:7) at flushPassiveEffects (https://localhost:3000/static/js/bundle.js:329077:18) at performSyncWorkOnRoot (https://localhost:3000/static/js/bundle.js:328294:7)


japan priority answered 1 year ago


I'll try it in version 6.2, it works with empty list, thx.

But I have another problem, when I have for example 3 items a select last one for removing, after action removing, reload list with 2 items ... error is same as before, because I have selected 3rd item, but after reload I have only 2 items.


Mateusz Lazaru staff commented 1 year ago

Absolutely, that's indeed a bug related to the MDBSelect component. I appreciate you bringing this to my attention, and I'll make sure to add it to our to-do list for fixing.

For the time being, I've got a workaround that should help you bypass this issue:

<>
  <MDBSelect data={selectData} />
  <MDBBtn
    onClick={() => {
      setSelectData([{ text: 'One', value: 1, defaultSelected }]);
    }}
  >
    Set value
  </MDBBtn>
</>

The error you're encountering is caused by the MDBSelect searching for an active option, which becomes non-existent after removal. To address this, the workaround involves resetting the selectData array with a new, existing active option. This effectively resolves the issue and prevents the error.


Mateusz Lazaru staff answered 1 year ago


Hi,

Thanks for reporting this issue, we're going to fix it soon.

For now, you can try to work it around by using a hidden option as a placeholder until you fetch data from the server.

const [data, setData] = useState([
  {
    text: 'Placeholder',
    hidden: true,
  },
]);


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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 6.1.0
  • Device: PC
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: Yes