Topic: MDBSelect crashes when you remove the last item from the data list

clickstudioltd priority asked 10 months ago


When you remove the last item of the data list while there is more than 1 item in the list, MDBSelect crashes.

Example:

import React, { useMemo, useState } from 'react';
import {
  MDBSelect,
  MDBContainer,
} from 'mdb-react-ui-kit';
import 'mdb-react-ui-kit/dist/css/mdb.min.css';

export default function App() {
    const [selectedItems, setSelectedItems] = useState([]);

    const items = useMemo(() => ([
        { text: 'Item 1', value: 'Item1' },
        { text: 'Item 2', value: 'Item2' },
        { text: 'Item 3', value: 'Item3' },
    ]), []);

    const availableItems = useMemo(() => items.filter(item => !selectedItems.includes(item.value)), [items, selectedItems]);

    return (
        <MDBContainer className="p-3">
            <MDBSelect
                label="Items"
                data={availableItems}
                search
                onChange={e => setSelectedItems([...selectedItems, e.value])}
            />

            <div className="mt-3">
                <div>Selected items:</div>
                {selectedItems.map((item, index) => <div key={index}>{item}</div>)}
            </div>
        </MDBContainer>
    );
}

If you select other items except the last one, it'll be fine but if you select the last item, you'll see it crash.


Mateusz Lazaru staff answered 10 months ago


Thanks for reporting and demo, we will fix it soon.



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