Topic: MDBSelect validation crashes the application on data change

clickstudioltd priority asked 2 months ago


Since MDBSelect is not among the supported elements by MDBValidation, the only way to validate this component is to use its validation property. When using this property, if you change the data of the select component, an error will occur that crashes the whole UI:

Uncaught TypeError: Le[e] is undefined

Steps to reproduce:

  1. Run the code below.
  2. Select an item from 'One', 'Two' or 'Three' from the select component.
  3. Click on the Clear Items button.
  4. See what happens.

Example code:

import React, { useMemo, useState } from 'react';
import { MDBBtn, MDBCol, MDBContainer, MDBSelect, MDBValidation } from 'mdb-react-ui-kit';

export default function App() {
    const [items, setItems] = useState(['One', 'Two', 'Three']);

    const data = useMemo(() => [{ text: 'None', value: 0 }].concat(items.map(item => ({
        text: item, value: item
    }))), [items]);

    return (
        <MDBContainer className="p-3">
            <MDBValidation className="row g-4">
                <MDBCol md={6}>
                    <MDBSelect
                        label="Items"
                        data={data}
                        validation />
                </MDBCol>

                <MDBCol md={6}>
                    <MDBBtn type="button" onClick={(e) => setItems(['One'])}>
                        Clear Items
                    </MDBBtn>

                    <MDBBtn type="submit" className="ms-2">
                        Submit
                    </MDBBtn>
                </MDBCol>
            </MDBValidation>
        </MDBContainer>
    );
}

Removing the validation property will fix this but then we have no validation!


Grzegorz Bujański staff answered 2 months ago


Unfortunately, I am unable to reproduce this error. Are you using TypeScript in your project?

The code you posted didn't want to work because the value should be of type string, not number.

I made a small change that allowed me to run this code. I added ' ' in value so that TypeScript will read it as a string:

const data = useMemo(() => [{ text: 'None', value: '0' }].concat(items.map(item => ({
    text: item, value: item
}))), [items]);

After this change, the code ran, but the error you write about does not occur. Check if making this change in your case will also solve the problem.


clickstudioltd priority commented 2 months ago

No, I'm using JavaScript. Type safety is not the problem for me. Since snippet maker is not on version 5 as well, I can't make a snippet to show it there.



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