Create Item examples are buggy

[vakopian]

For both examples ("Create Item" and "Create Item Multiple") when adding a new item it does not allow to backspace erase characters from the new item value.

To reproduce type abcd in the example site, it will display New item: abcd in the select list, then hit backspace to erase d. The "New item" stays abcd. And if you hit enter to actually select the typed abc value, what you get is still abcd.

The bug is in the handleFilter function:

    function handleFilter(e) {        
        if (e.detail.length === 0 && filterText.length > 0) {
            const prev = items.filter((i) => !i.created);
            items = [...prev, { value: filterText, label: filterText, created: true }];
        }
    }

When you have already typed abcd, an item was added to the items list with that value (with created = true). When d is erased, the filterText becomes abc, which means the previously added item will match! And therefore the e.detail which is the filtered list will not be empty and the created item will not be changed.

This function is also very fragile - the check e.detail.length === 0 is crucial, and if you try to do an update to items when that list is not empty it will trigger an infinite loop: changing items triggers a filter, the filter triggers a call to this handleFilter function, which updates the items, etc.

Is there a fix/workaround for this?