Topic: MDBSelect auto selects first item even when told not to

clickstudioltd priority asked 2 years ago


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}
                />

beenham priority answered 2 years ago


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 :(


Krzysztof Wilk staff answered 2 years ago


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 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 :)



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 4.0.0
  • Device: PC
  • Browser: Mozilla Firefox
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No