TypeError: i.chips_[t] is undefined after removing all input chips from page

[uncvrd]

Hi there,

I am trying to use input chips to add "tags" to a form. I seem to have it working for the most part, but when I remove the last chip, I receive the following error:

TypeError: i.chips_[t] is undefined

Here's a video demo: https://streamable.com/g8lwg

I feel like the docs are a bit vague on how to set up input chips, am I doing this correctly? I'd also like to have the chips be placed inside the current input I'm typing in instead of beneath the input.

Here's my current set up:

HTML:

<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label" data-mdc-auto-init="MDCTextField">
<input id="Tags" class="mdc-text-field__input">
    <div class="mdc-notched-outline">
    <div class="mdc-notched-outline__leading"></div>
    <div class="mdc-notched-outline__trailing"></div>
    </div>
</div>
<div class="mdc-text-field-helper-line">
    <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent">Hit enter/return to add tags</div>
</div>
<div class="mdc-chip-set mdc-chip-set--input" role="grid"></div>

Here's my Javascript to generate the MDCChips and listen for inputs:

<script>
    var chipSetEl;
    var chipSet;

    window.addEventListener('load', function () {
        mdc.autoInit();
        chipSetEl = document.querySelector('.mdc-chip-set');
        chipSet = new mdc.chips.MDCChipSet(chipSetEl);
        const tagsInput = document.getElementById("Tags");

        tagsInput.addEventListener('keydown', function (event) {
            if (event.key === 'Enter' || event.keyCode === 13) {
               
                // create the chip
                const chipEl = document.createElement("div");
                chipEl.setAttribute("class", "mdc-chip");
                chipEl.setAttribute("role", "row");

                const rippleEl = document.createElement("div");
                rippleEl.setAttribute("class", "mdc-chip__ripple");
                chipEl.appendChild(rippleEl);

                const textContainerEl = document.createElement("span");
                textContainerEl.setAttribute("role", "gridcell");

                const textEl = document.createElement("span");
                textEl.setAttribute("role", "button");
                textEl.setAttribute("tabindex", "0");
                textEl.setAttribute("class", "mdc-chip__text");
                textEl.innerText = tagsInput.value;

                textContainerEl.appendChild(textEl);
                chipEl.appendChild(textContainerEl);

                const iconContainerEl = document.createElement("span");
                iconContainerEl.setAttribute("role", "gridcell");

                const iconEl = document.createElement("i");
                iconEl.setAttribute("class", "material-icons mdc-chip__icon mdc-chip__icon--trailing");
                iconEl.setAttribute("tabindex", "-1");
                iconEl.setAttribute("role", "button");
                iconEl.innerText = "cancel";

                iconContainerEl.appendChild(iconEl);
                chipEl.appendChild(iconContainerEl);

                chipSetEl.appendChild(chipEl);
                chipSet.addChip(chipEl);
               
                // reset input value
                tagsInput.value = "";
                tagsInput.focus();

            }
        })
    })
</script>

Any idea why I see that error after removing the final chip from the set? Thanks!