MDBSelect auto selects first item even when told not to

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

clickstudioltd priority asked 1 year 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}
                />

Add comment

beenham priority answered 1 year ago

0 0 Best answer

Bumping this as it seems it still occurs in the latest release (v4.1.0).

In the <code>useEffect</code> 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 <code>clearBtn={true}</code>, it's frustrating for the user to have to clear the default selected option.

<code>SelectV2.tsx #341</code>

<pre class="prettyprint"><code> 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]);
</code></pre>

Please insert min. 20 characters.

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

Add comment

Krzysztof Wilk staff answered 1 year ago

0 0 Best answer

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

Add comment

Write

Create snippet

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

clickstudioltd

126Support score
36Questions 7Answers 0Snippets