Topic: MDBSelect auto selects first item even when told not to
Expected behavior
No auto selected item if there is no default selected item.
Actual behavior
MDBSelect auto selects the first item even when autoSelect property is set to false, that being autoSelect property is used for this purpose.
Resources (screenshots, code snippets etc.)
<MDBSelect
label="Test"
data={[
{ text: 1, value: 1 },
{ text: 2, value: 2 },
{ text: 3, value: 3 },
{ text: 4, value: 4 },
]}
autoSelect={false}
/>
Hi!
The autoSelect option enables autoselecting options on Tab press. Anyway - there should be an option to avoid that. For now - you can try using a fake option ({ text: '', value: 0 } i.e.) or use our old MDBSelect until we fix it :)
Keep coding!
clickstudioltd pro premium priority commented 2 years ago
Oh okay, thanks for the info. I rather use the new select since it has fixed some really annoying issues from the previous one. Unfortunately, fake option still appears in the list so I think it's better to use something like { text: 'None', value: 0 } for now at least.
Krzysztof Wilk staff commented 2 years ago
Yeah, the old select was hard to maintain, that's why we decided to refactor it. Now we are trying to gather as much valuable feedback, like yours, as we can before we remove entirely the old one :)
Bumping this as it seems it still occurs in the latest release (v4.1.0).
In the useEffect hook of the SelectV2, it default selects the first value if no item is selected.Could an option be added to disable this functionality?
While it's possible to clear the selection with clearBtn={true}, it's frustrating for the user to have to clear the default selected option.
SelectV2.tsx #341
useEffect(() => {
...
let selectedIndex = selectData.findIndex((el) => el.defaultSelected);
# Suggestion::
# This line here, add option to disable this behaviour, so Select is EMPTY by default.
// if there's no default selected item - get first not disabled one
if (selectedIndex === -1) {
selectedIndex = selectData.findIndex((el) => !el.disabled);
}
// additional check if all elements are disabled
// and there's no default selected element
if (selectedIndex !== -1) {
setInputValue(selectData[selectedIndex].text || ' ');
setSelectedElements([selectedIndex]);
}
return setActiveElement(selectedIndex);
}, [selectData, updateMultipleInput, multiple]);
Krzysztof Wilk staff commented 2 years ago
Hi!
Thanks for this code suggestion, we'll try to implement that in the next release. Sorry for the delay, there were some other important tasks that took our time :(
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 4.0.0
- Device: PC
- Browser: Mozilla Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No