html-combobox-element 0.0.2-beta.9 → 0.0.3

package/README.md

@@ -1 +1,123 @@
 # html-combobox-element
+
+The `<combo-box>` is a web component that provides dropdown/combobox functionality through `<select>` fully compatible API. 
+
+## Install
+```sh
+npm install html-combobox-element
+```
+
+```ts
+// app entry point
+import 'html-combobox-element';
+```
+This registers the `<combo-box>`, `<box-option>` and `<box-tag>` custom elements with full TS support for plain DOM/vanilla-JS usage.
+
+### TypeScript + JSX
+Using `<combo-box>` in JSX or a Vue template needs one extra step, due to a TypeScript limitation: JSX/template type-checking only picks up custom element typings from a
+file in your own project - not from a package's shipped `.d.ts`. 
+
+This isn't specific to this package; it affects any library adding custom elements to `JSX.IntrinsicElements` under the modern automatic JSX runtime.
+
+So, in addition to `import 'html-combobox-element'`, create and include one small file tsconfig.json, with the snippet for your framework: 
+
+<details>
+<summary><strong>React</strong> (<code>jsx: "react-jsx"</code>)</summary>
+
+```ts
+// combo-box.d.ts
+declare module 'react/jsx-runtime' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'combo-box': ComboboxElementAttributes;
+      'box-option': ComboboxOptionElementAttributes;
+      'box-tag': ComboboxTagElementAttributes;
+    }
+  }
+}
+declare module 'react/jsx-dev-runtime' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'combo-box': ComboboxElementAttributes;
+      'box-option': ComboboxOptionElementAttributes;
+      'box-tag': ComboboxTagElementAttributes;
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><strong>Preact</strong> (<code>jsx: "react-jsx"</code>, <code>jsxImportSource: "preact"</code>)</summary>
+
+```ts
+// combo-box.d.ts
+declare module 'preact/jsx-runtime' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'combo-box': ComboboxElementAttributes;
+      'box-option': ComboboxOptionElementAttributes;
+      'box-tag': ComboboxTagElementAttributes;
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><strong>Solid</strong> (<code>jsx: "preserve"</code>, <code>jsxImportSource: "solid-js"</code>)</summary>
+
+```ts
+// combo-box.d.ts
+declare module 'solid-js/jsx-runtime' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'combo-box': ComboboxElementAttributes;
+      'box-option': ComboboxOptionElementAttributes;
+      'box-tag': ComboboxTagElementAttributes;
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><strong>Vue</strong> (SFC <code>&lt;template&gt;</code>, checked via <code>vue-tsc</code>)</summary>
+
+Vue templates aren't JSX, so they're type-checked through `GlobalComponents` instead:
+
+```ts
+// combo-box.d.ts
+declare module 'vue' {
+  export interface GlobalComponents {
+    'combo-box': new () => { $props: ComboboxElementAttributes };
+    'box-option': new () => { $props: ComboboxOptionElementAttributes };
+  }
+}
+
+```
+
+This checks required props and value types for props you pass; like any native custom
+element, Vue still allows extra/unrecognized attributes through (that's expected Vue
+behavior for custom elements, not a gap in this typing). The trailing `export {};` may be 
+required here (without it the file is treated as a script, not a module, and the
+augmentation breaks Vue's own types).
+
+</details>
+
+### Exported types
+
+- `HTMLComboboxElement`, `HTMLComboboxOptionElement`, `HTMLComboboxTagElement` - element
+  interfaces, also usable via `document.querySelector('combo-box')` etc.
+- `ComboboxEvent`, `ComboboxInputEvent`, `ComboboxFocusEvent` - typed event objects
+  (`event.target` is a properly typed `HTMLComboboxElement`).
+- `ComboboxJsxAttributes`, `ComboboxOptionJsxAttributes` - the component's own props
+  (`value`, `multiple`, `placeholder`, `clearable`, `searchable`, `filterable`,
+  `required`, `disabled`, etc.), framework-independent.
+- `ComboboxElementAttributes`, `ComboboxOptionElementAttributes`,
+  `ComboboxTagElementAttributes` - the above plus common passthrough attributes
+  (`class`/`className`, `style`, `ref`, `children`, `data-*`, `aria-*`, `on*`). These
+  are what the snippets above use for `'combo-box'` / `'box-option'` / `'box-tag'`.

package/dist/cjs/combobox/Combobox.markup.js

@@ -22,10 +22,7 @@ class ComboboxMarkup {
         window.addEventListener('click', this.onClickOutside);
         this.#shadowRoot.host.addEventListener('focusin', this.onFocusIn);
         this.#shadowRoot.host.addEventListener('focusout', this.onFocusOut);
-        // document.addEventListener('scroll', this.#onDimensionsChanges);
-        // document.addEventListener('resize', this.#onDimensionsChanges);
         this.#rso = new ResizeObserver(this.#onDimensionsChanges);
-        // document.addEventListener('scrollend', this.onConnected);
     }
     connect() {
         const placeholder = this.#shadowRoot.host.getAttribute('placeholder') || `Выбрать`;
@@ -44,6 +41,11 @@ class ComboboxMarkup {
         const doc = document.importNode(innerTemplate.content, true);
         this.tagTemplate = doc.querySelector('box-tag');
     }
+    onHostConnected() {
+        const host = this.#shadowRoot.host;
+        const clearable = host.hasAttribute('clearable') || host.hasAttribute('multiple');
+        this.tagTemplate.toggleAttribute('visible', clearable);
+    }
     disconnect() {
         this.#shadowRoot.host.removeEventListener('focusin', this.onFocusIn);
         this.#shadowRoot.host.removeEventListener('focusout', this.onFocusOut);
@@ -82,7 +84,6 @@ class ComboboxMarkup {
     sort(query) {
         clearTimeout(this.#timer);
         this.#timer = setTimeout(() => {
-            // console.log(this.options)
             const regex = new RegExp(query.trim(), 'i');
             this.options.forEach((option) => {
                 if (!regex.test(option.textContent)) {
@@ -132,8 +133,6 @@ class ComboboxMarkup {
             return;
         this.#hostTop = this.#shadowRoot.host.getBoundingClientRect().top;
         try {
-            this.dropdown.style.display = 'flex';
-            // @ts-ignore
             this.dropdown.showPopover();
             this.#internals.ariaExpanded = "true";
         }
@@ -143,9 +142,7 @@ class ComboboxMarkup {
     };
     closeDropdown() {
         try {
-            // @ts-ignore
             this.dropdown.hidePopover();
-            this.dropdown.style.display = 'none';
             this.#internals.ariaExpanded = "false";
         }
         catch (e) {
@@ -181,14 +178,12 @@ class ComboboxMarkup {
         }
         else {
             const template = this.tagTemplate;
-            // console.log(this)
             tag = template.cloneNode(true);
             const label = tag.querySelector('[part="tag-label"]');
             label.textContent = option.label || option.textContent;
             button = tag.querySelector('[part="clear-tag"]');
         }
         button?.setAttribute('value', value);
-        // button.addEventListener('blur', e => e.stopPropagation());
         tag.setAttribute('value', value);
         this.tagsContainer.appendChild(tag);
         this.clearAllButton?.removeAttribute('disabled');
@@ -236,6 +231,7 @@ ${urls.map(url => `@import "${url}";`)}
   }
 
   #dropdown {
+    contain: layout style paint;
     inset: unset;
     margin: 0;
     /*position: absolute;*/
@@ -247,29 +243,30 @@ ${urls.map(url => `@import "${url}";`)}
     border-width: inherit;
     background-color: Canvas;
     outline: none;
-    
-    top: anchor(bottom);
+    display: none;
+    top: calc(anchor(bottom) + 2px);
     left: anchor(left);
     position-anchor: --position;
     position-try: normal flip-block;
   }
   
+  #dropdown:popover-open {
+    display: flex;
+  }
+  
   #dropdown::-webkit-scrollbar {
     display: none;
   }
   
-  [part="options"] {
+  #options {
     display: flex;
     flex-direction: column;
     justify-content: start;
     gap: 2px;
-    /*padding: inherit;*/
-    /*padding-block: .5rem;*/
-    border-radius: inherit;
-    
+    border-radius: inherit;  
   }
   
-  :host([filterable]) [part="options"], :host([searchable]) [part="options"] {
+  :host([filterable]) #options, :host([searchable]) #options {
     padding-top: .5rem;
   }
   
@@ -280,8 +277,6 @@ ${urls.map(url => `@import "${url}";`)}
     cursor: pointer;
     padding: inherit;
     padding-inline: .5lh;
-    /*padding-inline: 2px;*/
-    /*padding-block: 1px;*/
   }
   
   box-option:hover {
@@ -294,26 +289,17 @@ ${urls.map(url => `@import "${url}";`)}
     pointer-events: none;
   }
   
-  [part="search-input"] { 
+  #dropdown > [part="search-input"] { 
     display: none;
     position: sticky;
     top: 0;
     z-index: 2;
-    /*border-radius: inherit;*/
-    /*border-style: inherit;*/
-    /*border-width: inherit;*/
-    /*border-color: inherit;*/
-    /*padding: inherit;*/
-    /*padding-inline: .4lh;*/
     font-size: inherit;
     outline: inherit;
-    &::placeholder {
-      color: var(--search-input-placeholder-color);
-    }  
   }
   
-  :host([searchable]) [part="search-input"],
-  :host([filterable]) [part="search-input"] {
+  :host([searchable]) #dropdown > [part="search-input"],
+  :host([filterable]) #dropdown > [part="search-input"] {
     display: flow-root;
   }
   
@@ -321,7 +307,6 @@ ${urls.map(url => `@import "${url}";`)}
     text-align: left;
     overflow: hidden;
     padding-inline-start: 2px;
-    /*font-size: smaller;*/
     color: dimgrey;
     outline: none;
     user-select: none;
@@ -335,15 +320,12 @@ ${urls.map(url => `@import "${url}";`)}
     grid-column: 1 / span 2;
     width: 100%;
   }
-  
- 
 
   #tags {
     display: flex;
     flex-wrap: wrap;
     overflow: hidden;
     gap: 2px;
-    /*border-radius: inherit;*/
   }
 
   box-tag {
@@ -352,13 +334,10 @@ ${urls.map(url => `@import "${url}";`)}
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    /*border-radius: inherit;*/
     padding-inline-start: 0.4lh;
     padding-inline-end: 0.2lh;
     background-color: transparent;
     gap: 5px;
-    /*font-size: medium;*/
-    text-transform: uppercase;
     border-radius: 1lh;
   }
   
@@ -368,31 +347,28 @@ ${urls.map(url => `@import "${url}";`)}
     max-width: 100%;
   }
 
-  box-tag [part*="tag-label"] {
+  [part*="tag-label"] {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     user-select: none;
-    /*font-size: 95%;*/
     flex-grow: 1;
   }
   
-  :host([multiple]) box-tag[part*="tag-label"] {
+  :host([multiple]) [part*="tag-label"] {
     flex-grow: unset;
   }
   
-  [part*="clear-tag"], [part*="clear-all"] {
+  [part*="clear-tag"], #internal > [part*="clear-all"] {
     border-radius: 100%;
     border: none;
     aspect-ratio: 1;
-    /*line-height: 0;*/
     padding: 0!important;
     user-select: none;
     background-color: transparent;
   }
   
   [part*="clear-tag"] {
-    /*inline-size: 1lh;*/
     block-size: 1lh;
     font-size: .7lh;
     text-transform: uppercase;
@@ -404,7 +380,7 @@ ${urls.map(url => `@import "${url}";`)}
     outline-width: 1px;
   }
 
-  :host([multiple]) [part*="clear-all"] {
+  :host([multiple]) #internal > [part*="clear-all"] {
    display: block;
   }
   
@@ -414,13 +390,10 @@ ${urls.map(url => `@import "${url}";`)}
     place-content: center;
   }
 
-  [part*="clear-all"] {
+  #internal > [part*="clear-all"] {
     font-size: inherit;
     text-transform: uppercase;
-    /*inline-size: 1lh;*/
     block-size: 1lh;
-    /*inline-size: 1.2em;*/
-    /*block-size: 1.2em;*/
     display: none;
   }
   
@@ -428,28 +401,20 @@ ${urls.map(url => `@import "${url}";`)}
     outline: none;
   }
 
-  [part*="clear-all"]:hover, 
+  #internal > [part*="clear-all"]:hover, 
   [part*="clear-tag"]:hover {
     color: ActiveText;
     cursor: pointer;
   }
 
-  [part*="clear-all"]:hover {
+  #internal >[part*="clear-all"]:hover {
     background-color: ButtonFace;
   }
   
-  :host:has(#tags:empty) [part*="clear-all"] {
+  #tags:empty + [part*="clear-all"] {
     pointer-events: none;
     outline: none;
   }
-  
-  [part*="not-found"] {
-    visibility: visible;
-  }
-  
-  /*:host:has(#dropdown:popover-open) #dropdown {*/
-  /*  border-top-left-radius: 0;*/
-  /*}*/
  
 </style>
 <div id='internal' part='internal'>
@@ -460,8 +425,9 @@ ${urls.map(url => `@import "${url}";`)}
 
 <div id="dropdown" popover="manual" part='dropdown' >
   <input placeholder='Поиск' name="search-input" part="search-input" inputmode='search' autofocus />
-  <div part="options"></div>
+  <div part="options" id='options'></div>
 </div>
+
 <template id='tag-template'>
   <box-tag>
     <span part="tag-label"></span>
@@ -469,5 +435,11 @@ ${urls.map(url => `@import "${url}";`)}
   </box-tag>
 </template>
 `;
+    static markup;
+    static {
+        const template = document.createElement('template');
+        template.innerHTML = ComboboxMarkup.template;
+        ComboboxMarkup.markup = template;
+    }
 }
 exports.ComboboxMarkup = ComboboxMarkup;

package/dist/cjs/combobox/HTML.combobox.element.js

@@ -7,7 +7,7 @@ const HTML_combobox_option_element_js_1 = require("./HTML.combobox.option.elemen
 const Boolean_attribute_value_normalizer_js_1 = require("./Boolean.attribute.value.normalizer.js");
 class HTMLComboboxElement extends HTMLElement {
     static OWN_IDL = new Set(['required', 'disabled', 'clearable', 'multiple', 'filterable', 'searchable', 'value', 'placeholder', 'query']);
-    static observerOptions = { childList: true, attributes: false, subtree: false };
+    static observerOptions = { childList: true };
     static styleSheet = [new CSSStyleSheet];
     static formAssociated = true;
     shadowRoot;
@@ -24,32 +24,51 @@ class HTMLComboboxElement extends HTMLElement {
         this.#internals.ariaHasPopup = "dialog";
         this.shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true }); //delegatesFocus: true
         this.#markup = new Combobox_markup_js_1.ComboboxMarkup(this.shadowRoot, this.#internals);
-        this.shadowRoot.innerHTML = Combobox_markup_js_1.ComboboxMarkup.template;
+        this.shadowRoot.appendChild(Combobox_markup_js_1.ComboboxMarkup.markup.content.cloneNode(true));
         this.shadowRoot.adoptedStyleSheets = _a.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
         this.#markup.connect();
     }
     // Lifecycle callbacks
     connectedCallback() {
-        // super.setAttribute('tabindex', '0');
+        for (const child of Array.from(this.children)) {
+            if (_a.#isOptionLike(child)) {
+                this.#markup.optionsContainer?.appendChild(child);
+            }
+        }
+        this.#markup.onHostConnected();
         this.shadowRoot.addEventListener('optionselectedstatechange', this.#onOptionSelectedStateChanges);
         this.shadowRoot.addEventListener('tagcleared', this.#onClearTag);
-        this.#onOptionsChanges([{ addedNodes: Array.from(this.children) }]);
         this.#initialAttributesSynchronization();
-        this.#observer.observe(this, _a.observerOptions);
+        this.#observer.observe(this.#markup.optionsContainer, _a.observerOptions);
         this.addEventListener('keydown', this.#onKeyDown);
         this.#markup.clearAllButton.addEventListener('click', this.#onClearAll);
         this.#markup.searchInput.addEventListener('input', this.#onInput);
         this.#markup.dropdown.addEventListener('toggle', this.#onPickerToggle);
         this.#setValidityAndFormValue();
-    }
+        // Options/optgroups can end up as direct light-DOM children of <combo-box> without ever
+        // going through insertBefore/appendChild below: parsed straight from static HTML markup,
+        // or - notably - Solid's compiler, which renders static JSX subtrees via a single
+        // <template> + cloneNode(true), never calling any child-mutation method at all. Sweep
+        // whatever is already here once on connect and move it into the real options container.
+    }
+    static #isOptionLike(node) {
+        return node instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement;
+    }
+    // Overwritten child-mutation methods.
+    //
+    // <box-option>/<optgroup> children don't actually live under <combo-box> itself - they're
+    // redirected into #markup.optionsContainer inside the shadow root, which is what the
+    // dropdown renders from and what #observer watches. Every native method a framework's
+    // renderer or plain user code might use to add/move/remove children needs to funnel through
+    // the same redirect, since browsers implement each of these independently (overriding one,
+    // e.g. insertBefore, does not make the others call it under the hood):
+    //   - React calls appendChild for a plain append and insertBefore only when reordering.
+    //   - Vue and Preact always call insertBefore, with a null reference for a plain append.
+    //   - Solid mostly bypasses all of them for static subtrees (see connectedCallback above),
+    //     but dynamic option lists still go through insert()/insertBefore().
     insertBefore = (node, referenceNode) => {
-        // Since we just move options to the #markup.optionsContainer, they are no more part of this children
-        // next time, when someone is calling this(combo-box).insertBefore, an error will be thrown:
-        // Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
-        // Here we overwrite this method, and if new node is HTMLComboboxOptionElement,
-        // we just delegate this job to the real option parent: optionsContainer
-        if (node instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement) {
+        if (_a.#isOptionLike(node)) {
             this.#markup.optionsContainer?.insertBefore(node, referenceNode);
         }
         else {
@@ -57,6 +76,52 @@ class HTMLComboboxElement extends HTMLElement {
         }
         return node;
     };
+    appendChild = (node) => {
+        if (_a.#isOptionLike(node)) {
+            this.#markup.optionsContainer?.appendChild(node);
+        }
+        else {
+            super.appendChild(node);
+        }
+        return node;
+    };
+    append = (...nodes) => {
+        nodes.forEach(node => this.appendChild(typeof node === 'string' ? new Text(node) : node));
+    };
+    prepend = (...nodes) => {
+        [...nodes].reverse().forEach(node => {
+            const n = typeof node === 'string' ? new Text(node) : node;
+            if (_a.#isOptionLike(n)) {
+                this.#markup.optionsContainer?.insertBefore(n, this.#markup.optionsContainer.firstChild);
+            }
+            else {
+                super.insertBefore(n, this.firstChild);
+            }
+        });
+    };
+    replaceChildren = (...nodes) => {
+        this.#markup.optionsContainer?.replaceChildren();
+        super.replaceChildren();
+        this.append(...nodes);
+    };
+    removeChild = (child) => {
+        if (child.parentNode === this.#markup.optionsContainer) {
+            this.#markup.optionsContainer.removeChild(child);
+        }
+        else if (child.parentNode === this) {
+            super.removeChild(child);
+        }
+        return child;
+    };
+    replaceChild = (newChild, oldChild) => {
+        if (oldChild.parentNode === this.#markup.optionsContainer) {
+            this.#markup.optionsContainer.replaceChild(newChild, oldChild);
+        }
+        else {
+            super.replaceChild(newChild, oldChild);
+        }
+        return oldChild;
+    };
     get changed() {
         return this.#changed;
     }
@@ -72,6 +137,7 @@ class HTMLComboboxElement extends HTMLElement {
     }
     formResetCallback() {
         this.selectedOptions.forEach(option => option.selected = false);
+        this.#markup.tagsContainer?.replaceChildren();
         this.dispatchEvent(new Event('reset'));
         requestAnimationFrame(() => this.#markup.searchInput?.focus());
     }
@@ -184,11 +250,14 @@ class HTMLComboboxElement extends HTMLElement {
     set value(value) {
         if (this.value === value || typeof value !== 'string')
             return;
-        const values = value.split(',').filter(Boolean);
-        this.#values = new Set(values);
+        const nextValues = new Set(value.split(',').filter(Boolean));
         this.#markup.options.forEach(option => {
-            const value = option.value;
-            option.selected = this.#values.has(value);
+            const optionValue = option.value;
+            // toggling `selected` drives #onOptionSelectedStateChanges, which is the
+            // single source of truth for #values and tags - don't pre-assign #values
+            // here, or the dedup logic there ends up deselecting the option it's in
+            // the middle of selecting (see: stale tag left behind on next selection)
+            option.selected = nextValues.has(optionValue);
         });
     }
     // Instance methods
@@ -237,9 +306,24 @@ class HTMLComboboxElement extends HTMLElement {
     // Internal
     #onOptionsChanges = (records) => {
         records.forEach(record => {
-            record.addedNodes.forEach(node => {
-                if (node instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement) {
-                    this.#markup.optionsContainer.append(node);
+            record.removedNodes.forEach(option => {
+                if (option instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {
+                    const value = option.value;
+                    // mode is searchable,
+                    // user type "a", select a result,
+                    // then types "b". Here previous options will be replaced with new ones,
+                    // this.#values may contain "a", but there is no relevant option yet,
+                    // so just wait
+                    if (this.searchable && this.#internals.ariaExpanded === 'true') {
+                        return;
+                    }
+                    // options was removed, but values still include this value,
+                    // just clear, this is like a reset was called
+                    if (this.#values.has(value) && !this.#markup.optionsContainer?.querySelector(`[value="${value}"]`)) {
+                        this.#values.delete(value);
+                        const control = this.#markup.getTagByValue(value);
+                        control?.remove();
+                    }
                 }
             });
         });
@@ -251,11 +335,17 @@ class HTMLComboboxElement extends HTMLElement {
             if (!this.multiple) {
                 this.#values.forEach(value => {
                     const prevOption = this.#markup.getOptionByValue(value);
-                    if (prevOption)
+                    if (prevOption) {
                         prevOption.selected = false;
+                    }
+                    else {
+                        const tag = this.#markup.getTagByValue(value);
+                        this.#values.delete(value);
+                        tag?.remove();
+                    }
                 });
             }
-            if (!this.#values.has(value)) {
+            if (!this.#values.has(value) || !this.#markup.getTagByValue(value)) {
                 this.#values.add(value);
                 this.#markup.createAndAppendTag(option);
                 this.#setValidityAndFormValue();
@@ -270,14 +360,24 @@ class HTMLComboboxElement extends HTMLElement {
                 this.#setValidityAndFormValue();
                 this.dispatchEvent(new Event('change'));
             }
+            else {
+                const tag = this.#markup.getTagByValue(value);
+                tag?.remove();
+            }
         }
     };
     #onClearTag = (event) => {
         const target = event.target;
         if (target) {
             const option = this.#markup.getOptionByValue(target.value);
-            if (option)
+            if (option) {
                 option.selected = false;
+            }
+            else {
+                const tag = this.#markup.getTagByValue(target.value);
+                this.#values.delete(target.value);
+                tag?.remove();
+            }
             requestAnimationFrame(() => {
                 if (this.#values.size) {
                     this.focus();
@@ -319,6 +419,7 @@ class HTMLComboboxElement extends HTMLElement {
         if (activeElement === this.#markup.searchInput && event.key === 'Enter') {
             event.stopPropagation();
             if (!this.searchable && this.filterable) {
+                console.log('sss');
                 this.#markup.sort(this.#markup.searchInput.value);
             }
             if (this.searchable) {
@@ -332,8 +433,14 @@ class HTMLComboboxElement extends HTMLElement {
                 return;
             }
         }
-        if (event.key === 'Enter' && activeElement instanceof HTMLElement && activeElement.part.contains('clear-tag')) {
+        if (event.key === 'Enter' && activeElement.part.contains('clear-tag')) {
+            // @ts-ignore
+            // this.#onClearTag(event);
+            // event.stopPropagation();
+            // event.preventDefault()
+            // @ts-ignore
             activeElement.click();
+            // event.stopPropagation();
             return;
         }
         if (event.key === 'Escape' || event.key === 'Enter') {
@@ -366,7 +473,6 @@ class HTMLComboboxElement extends HTMLElement {
     }
     #initialAttributesSynchronization() {
         for (const key of _a.OWN_IDL) {
-            // @ts-ignore
             this[key] = this.getAttribute(key);
         }
     }
@@ -395,7 +501,7 @@ class HTMLComboboxElement extends HTMLElement {
 }
 exports.HTMLComboboxElement = HTMLComboboxElement;
 _a = HTMLComboboxElement;
-document.addEventListener('keypress', (event) => {
+document.addEventListener('keypress', () => {
     if (document.activeElement instanceof HTMLComboboxElement) {
         const maybeHost = document.activeElement.shadowRoot.activeElement;
         if (maybeHost instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {