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)
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 2 years 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.
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,
},
]);
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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