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

clickstudioltd priority asked 9 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 9 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