Topic: MDBSelect with empty list
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)
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,
},
]);
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.
mlazaru staff commented a 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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