@fluid-topics/ft-search-input 1.3.16 → 1.3.18

package/build/ft-search-input-suggestion.js

@@ -25,7 +25,7 @@ class FtSearchInputSuggestionManager {
                  role="listbox"
                  aria-label="${searchInputContext.messages.suggestionsLabel()}"
                  part="container">
-                ${repeat(this.ftSearchInput.suggestResults || [], suggest => suggest.value, (suggest, index) => {
+                ${repeat(this.ftSearchInput.suggestResults || [], (suggest) => suggest.value, (suggest, index) => {
             return this.renderSuggestion(index, suggest, searchPlaceConverter);
         })}
             </div>
@@ -85,14 +85,14 @@ class FtSearchInputSuggestionManager {
                 break;
         }
         return html `
-            <ft-icon .variant="${iconVariant}" .value="${icon}" part="suggestion-icon"></ft-icon>
+            <ft-icon .variant=${iconVariant} .value=${icon} part="suggestion-icon"></ft-icon>
         `;
     }
     get selectedSuggestOption() {
         return this.ftSearchInput.shadowRoot.querySelector(`#${this.ftSearchInput.selectedSuggestOptionId}`);
     }
     getLastSuggestionElement() {
-        let suggestions = this.ftSearchInput.shadowRoot.querySelectorAll("[role=option]");
+        const suggestions = this.ftSearchInput.shadowRoot.querySelectorAll("[role=option]");
         return suggestions.length > 0 ? suggestions[suggestions.length - 1] : null;
     }
     getFirstSuggestionElement() {

package/build/ft-search-input.d.ts

@@ -17,6 +17,7 @@ export declare class FtSearchInput extends FtSearchInput_base implements FtSearc
     launchSearchPath?: string;
     useCustomSearchPath: boolean;
     triggerSearchOnClear: boolean;
+    focusOnDisplay: boolean;
     input: HTMLInputElement;
     private launchSearchButton;
     suggestions: FtSearchInputSuggestionManager;
@@ -30,7 +31,9 @@ export declare class FtSearchInput extends FtSearchInput_base implements FtSearc
     onSuggestionSelected(value: string): void;
     get shouldDisplaySuggestions(): boolean;
     private onClick;
+    private showSuggestionsOnFocus;
     private onFocus;
+    focusInput(showSuggestions?: boolean): Promise<void>;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     private closeSuggestListbox;

package/build/ft-search-input.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, nothing } from "lit";
-import { noTextInputDefaultClearButton, redux, screenReaderStyles } from "@fluid-topics/ft-wc-utils";
+import { isTouchScreen, noTextInputDefaultClearButton, redux, screenReaderStyles, waitFor } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-search-input.styles";
 import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
 import { withI18n } from "@fluid-topics/ft-i18n";
@@ -24,10 +24,12 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
         this.displaySuggestListbox = false;
         this.useCustomSearchPath = false;
         this.triggerSearchOnClear = false;
+        this.focusOnDisplay = false;
         this.suggestions = new FtSearchInputSuggestionManager(this);
+        this.showSuggestionsOnFocus = true;
         this.closeSuggestListbox = (e) => {
             const path = e.composedPath();
-            const inside = path.some(n => n === this || n === this.shadowRoot);
+            const inside = path.some((n) => n === this || n === this.shadowRoot);
             if (!inside) {
                 this.displaySuggestListbox = false;
                 this.selectedSuggestOptionId = undefined;
@@ -37,7 +39,7 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
     }
     render() {
         var _a, _b, _c;
-        let classes = {
+        const classes = {
             "ft-search-input": true,
             "ft-search-input--with-suggestions": (_b = (_a = this.suggestResults) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 > 0,
             "ft-search-input--with-suggestions-closed": this.forceCloseSuggestion,
@@ -53,17 +55,17 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
                                part="input"
                                type="search"
                                placeholder="${searchInputContext.messages.placeholder()}"
-                               .value="${this.liveQuery}"
+                               .value=${this.liveQuery}
                                role="combobox"
                                aria-autocomplete="list"
                                aria-controls="${this.suggestions.listboxId}"
                                aria-expanded="${this.displaySuggestListbox}"
                                aria-activedescendant="${(_c = this.selectedSuggestOptionId) !== null && _c !== void 0 ? _c : nothing}"
-                               @input=${(e) => this.onInput(e)}
-                               @click="${() => this.onClick()}"
-                               @focus="${() => this.onFocus()}"
-                               @keydown=${(e) => this.onSearchBarKeyDown(e)}
-                               @keyup=${(e) => this.onSearchBarKeyUp(e)}>
+                               @input=${this.onInput}
+                               @click=${this.onClick}
+                               @focus=${this.onFocus}
+                               @keydown=${this.onSearchBarKeyDown}
+                               @keyup=${this.onSearchBarKeyUp}>
                     </div>
                     <div class="sr-only" aria-live="polite" aria-atomic="true">
                         ${this.renderLiveText()}
@@ -103,6 +105,7 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
         }
     }
     onSearchBarKeyDown(e) {
+        this.forceCloseSuggestion = false;
         if (!["Escape", "Tab", "Shift"].includes(e.key)) {
             this.displaySuggestListbox = true;
         }
@@ -137,10 +140,11 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
                     this.suggestions.clearSelection();
                 }
                 break;
-            case "Enter":
+            case "Enter": {
                 const elementToClick = this.suggestions.selectedSuggestOption || this.launchSearchButton;
                 elementToClick === null || elementToClick === void 0 ? void 0 : elementToClick.click();
                 break;
+            }
             case "Backspace":
                 e.stopPropagation();
                 break;
@@ -163,7 +167,7 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
                 break;
         }
     }
-    onInput(e) {
+    onInput() {
         var _a;
         (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setLiveQuery(this.input.value);
         this.forceCloseSuggestion = false;
@@ -171,7 +175,9 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
     onClearInput() {
         var _a;
         (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setLiveQuery("");
-        this.triggerSearchOnClear ? this.launchSearch("") : nothing;
+        if (this.triggerSearchOnClear) {
+            this.launchSearch("");
+        }
         this.input.focus();
     }
     launchSearch(query) {
@@ -187,17 +193,29 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
     }
     get shouldDisplaySuggestions() {
         var _a;
-        return this.displaySuggestListbox && ((_a = this.suggestResults) !== null && _a !== void 0 ? _a : []).length > 0;
+        return !this.forceCloseSuggestion && this.displaySuggestListbox && ((_a = this.suggestResults) !== null && _a !== void 0 ? _a : []).length > 0;
     }
     onClick() {
         this.onFocus();
     }
     onFocus() {
-        this.displaySuggestListbox = true;
+        if (this.showSuggestionsOnFocus) {
+            this.displaySuggestListbox = true;
+        }
+        this.forceCloseSuggestion = false;
+    }
+    async focusInput(showSuggestions = true) {
+        this.showSuggestionsOnFocus = showSuggestions;
+        await waitFor(() => this.input, 50);
+        this.input.focus();
+        this.showSuggestionsOnFocus = true;
     }
     async connectedCallback() {
         super.connectedCallback();
         document.addEventListener("pointerdown", this.closeSuggestListbox);
+        if (this.focusOnDisplay && !isTouchScreen) {
+            this.focusInput(false);
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -213,7 +231,7 @@ FtSearchInput.styles = [
     noTextInputDefaultClearButton,
     styles,
     ...FtSearchInputSuggestionManager.styles,
-    screenReaderStyles
+    screenReaderStyles,
 ];
 __decorate([
     redux()
@@ -242,6 +260,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtSearchInput.prototype, "triggerSearchOnClear", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchInput.prototype, "focusOnDisplay", void 0);
 __decorate([
     query(".ft-search-input--input")
 ], FtSearchInput.prototype, "input", void 0);