Topic: Multiple issues with MDBSelect

clickstudioltd priority asked 7 months ago


I have been working with MDBSelect (single and multi select) for a while and I've faced multiple issues which I think might be bugs or something that I'm doing wrong. Since there are no examples on how to exactly work with MDBSelect, I have to ask these questions.

  1. Do we have to manage the state of the data that we pass to MDBSelect from our side, or does the component handle the state of the data by itself?
  2. If we manage the state of the data ourselves (e.g. handling what options are selected or not, using getValue method), then in the multi select mode, the text that shows the selected items only shows the first item and not the rest.
  3. MDBSelect still uses the old validation method, and it's not possible to handle server side validation with this component.
  4. After updating to the latest version, whenever the list of options is opened, it is scrolled to the bottom of the list.

Lastly, please include a working example of the components in the documentations, this is so frustrating to 'figure out' how you should and should not work with this library.


clickstudioltd priority answered 7 months ago


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.

enter image description here

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

Krzysztof Wilk staff commented 7 months ago

Hi!

Thanks, we will check and fix that.

About the background color - we'll also check that but that's intended probably, you should be able to navigate inside the select via keyboard and that's the focus effect :)

Keep coding!


clickstudioltd priority commented 7 months ago

I hope it's nothing on my end!

I'll keep coding D:


Krzysztof Wilk staff answered 7 months ago


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!


clickstudioltd priority answered 7 months ago


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.


Krzysztof Wilk staff answered 7 months ago


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!



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

  • User: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 3.0.0
  • Device: PC
  • Browser: Mozilla Firefox
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No