@fluid-topics/ft-combobox 1.3.27 → 1.3.29

package/build/ft-combobox.d.ts

@@ -21,6 +21,7 @@ export declare class FtCombobox extends FtCombobox_base implements FtComboboxPro
     suggestionsProviderDebouncerTimeout?: number;
     private _value;
     get value(): string;
+    canOfferNewValue: boolean;
     set value(value: string);
     private filter;
     private isOpen;
@@ -71,9 +72,7 @@ export declare class FtCombobox extends FtCombobox_base implements FtComboboxPro
     private onComboboxFocus;
     private onComboboxBlur;
     private onBackgroundPointerUp;
-    private onListboxPointerout;
     private onSuggestionClick;
-    private onSuggestionPointerout;
     focus(): void;
     blur(): void;
 }

package/build/ft-combobox.js

@@ -9,6 +9,7 @@ import { property, query, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { when } from "lit/directives/when.js";
 import { Debouncer, FtLitElement, numberProperty, screenReaderStyles } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-combobox.styles";
 import { FtInputLabel } from "@fluid-topics/ft-input-label";
@@ -35,6 +36,7 @@ class FtCombobox extends withI18n(FtLitElement) {
         this.outlined = false;
         this.suggestionsProvider = () => [];
         this._value = "";
+        this.canOfferNewValue = true;
         this.filter = "";
         this.isOpen = false;
         this.comboboxHasVisualFocus = false;
@@ -43,8 +45,15 @@ class FtCombobox extends withI18n(FtLitElement) {
         this.visibleSuggestions = [];
         this.activeIndex = -1;
         this.onComboboxInput = () => {
-            this.filter = this.input.value;
+            const newValue = this.input.value;
+            const hadValue = this._value !== "";
+            this.filter = newValue;
             this.activeIndex = -1;
+            // Dispatch change event when clearing the field after having a value
+            if (hadValue && newValue === "") {
+                this._value = "";
+                this.dispatchChangeEvent();
+            }
             this.updateSuggestions();
             const total = this.getTotalSuggestionsCount();
             if (total > 0) {
@@ -157,16 +166,15 @@ class FtCombobox extends withI18n(FtLitElement) {
             this.removeVisualFocusAll();
         };
         this.onBackgroundPointerUp = (event) => {
-            const target = event.target;
-            if (!this.contains(target)) {
+            // Use composedPath to handle Shadow DOM correctly
+            const path = event.composedPath();
+            const clickedInside = path.includes(this);
+            if (!clickedInside) {
                 this.comboboxHasVisualFocus = false;
                 this.removeVisualFocusAll();
                 setTimeout(() => this.closeListbox(true), 300); // Inspired from the WCAG examples
             }
         };
-        this.onListboxPointerout = () => {
-            setTimeout(() => this.closeListbox(false), 300); // Inspired from the WCAG examples
-        };
         this.onSuggestionClick = (suggestion) => {
             var _a;
             if (suggestion.kind === "new") {
@@ -177,9 +185,6 @@ class FtCombobox extends withI18n(FtLitElement) {
             }
             this.closeListbox(true);
         };
-        this.onSuggestionPointerout = () => {
-            setTimeout(() => this.closeListbox(false), 300); // Inspired from the WCAG examples
-        };
         this.addI18nContext(comboboxContext, defaultComboboxMessages);
     }
     willUpdate(props) {
@@ -249,16 +254,17 @@ class FtCombobox extends withI18n(FtLitElement) {
                     <div class="sr-only" aria-live="polite" aria-atomic="true">
                         ${this.renderLiveText()}
                     </div>
-                    <ul
-                        id="combobox-listbox"
-                        class="${classMap(listboxClasses)}"
-                        role="listbox"
-                        aria-label="${this.label || "Options"}"
-                        data-visible="${this.isOpen}"
-                        @pointerout=${this.onListboxPointerout}
-                    >
-                        ${repeat(this.visibleSuggestions, (option) => option.id, (option, index) => this.renderSuggestion(option, index))}
-                    </ul>
+                    ${when(this.visibleSuggestions.length > 0, () => html `
+                        <ul
+                            id="combobox-listbox"
+                            class="${classMap(listboxClasses)}"
+                            role="listbox"
+                            aria-label="${this.label || "Options"}"
+                            data-visible="${this.isOpen}"
+                        >
+                            ${repeat(this.visibleSuggestions, (option) => option.id, (option, index) => this.renderSuggestion(option, index))}
+                        </ul>`)}
+
                 </div>
                 ${this.helper ? html `
                     <ft-typography class="ft-combobox--helper-text" variant="caption">
@@ -287,8 +293,8 @@ class FtCombobox extends withI18n(FtLitElement) {
                 class="ft-combobox--option ${suggestion.kind === "new" ? "ft-combobox--option-new-value" : ""}"
                 role="option"
                 aria-selected="${index === this.activeIndex}"
+                @pointerdown=${(e) => e.preventDefault()}
                 @click=${() => this.onSuggestionClick(suggestion)}
-                @pointerout=${this.onSuggestionPointerout}
             >
                 ${(() => {
             const isNewValue = suggestion.kind === "new" && !!this.suggestionsHelper;
@@ -322,7 +328,9 @@ class FtCombobox extends withI18n(FtLitElement) {
     shouldOfferNew() {
         var _a;
         const currentValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || this.value || "";
-        return currentValue !== "" && !this.providedSuggestions.some((o) => o.label === currentValue);
+        return currentValue !== ""
+            && !this.providedSuggestions.some((o) => o.label === currentValue)
+            && this.canOfferNewValue;
     }
     getTotalSuggestionsCount() {
         return this.visibleSuggestions.length;
@@ -448,7 +456,7 @@ class FtCombobox extends withI18n(FtLitElement) {
     }
     dispatchChangeEvent() {
         this.dispatchEvent(new CustomEvent("change", {
-            detail: { value: this._value },
+            detail: this._value,
             bubbles: true,
             composed: true,
         }));
@@ -604,6 +612,9 @@ __decorate([
 __decorate([
     property({ noAccessor: true })
 ], FtCombobox.prototype, "value", null);
+__decorate([
+    property({ type: Boolean })
+], FtCombobox.prototype, "canOfferNewValue", void 0);
 __decorate([
     state()
 ], FtCombobox.prototype, "filter", void 0);