Cannot remove the last chip

[Julien Barach]

Hi,

I would like to remove chips without enabling the enableDelete feature but instead by clicking on a chip.

With this code, everything is working except for the last item that remains visible. Is this a bug ?

import React, {useEffect, useState} from 'react'
import {ChipDirective, ChipListComponent, ChipsDirective} from "@syncfusion/ej2-react-buttons";

export default function Test() {

    const list_data = [{name: 'toto'}, {name: 'titi'}]
    const [list, setList] = useState([...list_data])
    
    return (
        <div>
            {list.map(l => <div key={l.name}>{l.name}</div>)}
            <div>
                <ChipListComponent click={e => setList(list.filter(l => l.name !== e.data.item.name))}>
                    <ChipsDirective>
                        {list.map(a => <ChipDirective text={a.name}
                                                      item={a}
                                                      cssClass="e-warning"
                                                      key={a.name} />)
                        }
                    </ChipsDirective>
                </ChipListComponent>
            </div>
        </div>
    )
}

[Indhumathy Loganathan]

Hi Julien,

Greetings from Syncfusion support.

We have validated your reported query in the Chip component with the shared code snippet. The reported issue occurs due to the Chip component data is not updated based on the click. To overcome the issue, we suggest you to update the chips data on each item click. Check the below code snippet.

<ChipListComponent

id="chip"

click={(e) => {

  setList(list.filter((l) => l.name !== e.data.item.name));

  var chip = document.getElementById('chip').ej2_instances[0];

  setTimeout(function () {

    chip.chips = chip.chips.filter(

      (l) => l.text !== e.data.item.name

    );

  }, 10);

}}

> 

...

</ChipListComponent>

Sample: https://stackblitz.com/edit/react-icx4jw?file=src%2FApp.js

Please check the modified sample and get back to us if you need any further assistance.

Regards,

Indhumathy L