Hey,

I tested the component with unique values, still the same problem. Then, I tested with 1 pre-selected option at the top of the list, it works as intended without scrolling to the bottom on opening. If I pre-select an item from bottom of the list, it scrolls down to the bottom, but this also happens whenever I don't have any selected options at all.

By the way, the first selected option in the list always has that background color for when it's selected even when you deselect it.

My code:

<MDBSelect
                name="permissions"
                label="Permissions"
                data={[
                    { text: 'Test', value: 1, selected: true },
                    { text: 'Test', value: 2 },
                    { text: 'Test', value: 3 },
                    { text: 'Test', value: 4 },
                    { text: 'Test', value: 5 },
                    { text: 'Test', value: 6 },
                    { text: 'Test', value: 7 },
                    { text: 'Test', value: 8 },
                    { text: 'Test', value: 9 },
                    { text: 'Test', value: 10, selected: true },
                ]}
                multiple />

Hi!

According to the validation - there's probably a typo in our documentation. You should wrap your MDBSelect component not only in the MDBValidation one but also in the MDBValidationItem one (we added it in the 3.0.0 update). Now you should be able to handle the is-valid className via the invalid item property. More about available options you can read here: https://mdbootstrap.com/docs/b5/react/forms/validation/#docsTabsAPI.

In the MDBSelect component, every option should have a different value property, that's probably causing the problem with scrolling. All of our examples have unique values and everything is working as expected. Could you check and possibly confirm that unique values or setting selected: true in one of the options are not causing this problem?

Keep coding!

Thank you for the clarification.

For the bug you mentioned, this happens with the single select too which essentially makes the user think that the selected option is not selected. Hope it's fixed in the next release.

For server side validation, I figured out that I have to add is-invalid class to inputClassName property rather than className which applies to the wrapper. I wish this had a better naming convention, like some other components which mark wrapper properties with wrapper prefix.

For list of options, the first time list is scrolled correctly at the top, but when I open it the second time it's scrolled down to the last item by default. I use this code:

<MDBSelect
name="permissions"
label="Permissions"
data={[
    { text: 'Test', value: 1 },
    { text: 'Test', value: 1 },
    { text: 'Test', value: 1 },
    { text: 'Test', value: 1 },
    { text: 'Test', value: 1 },
    { text: 'Test', value: 1 },
    { text: 'Test', value: 1 },
    { text: 'Test', value: 1 },
    { text: 'Test', value: 1 },
    { text: 'Test', value: 1 },
]}
multiple
required
validation />

This happens for me both on Firefox and Edge which is Chrome based.

Hi!

1. There's no need to handle it on your own. The MDBSelect component contains an inside state which is handled by itself. You can access the selected options using the getValue method to change i.e. filter or sort criteria. Anyway - it should react on props change, so if you store the data in some state inside the outer component - it should rerender and refresh the options along with the selected value. It is helpful when you are fetching your options from the backend.
2. That's a bug. Some users reported it before. We will fix it as soon as possible.
3. Could you describe your problems with the server-side validation?
4. Could you provide some sample code? I tried to imitate this issue on the chrome and firefox browsers and everything is working as expected.

Keep coding!