feat(single-select-base): add disableMenuOpenOnFocus attr

LeavittSoftware · May 23, 2024 · fa84653 · fa84653
1 parent d83602f
commit fa84653
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/leavittbook/src/demos/leavitt-company-select/leavitt-company-select-playground.ts b/packages/leavittbook/src/demos/leavitt-company-select/leavitt-company-select-playground.ts
@@ -18,6 +18,7 @@ import { DOMEvent } from '@leavittsoftware/web/titanium/types/dom-event';
 @customElement('leavitt-company-select-playground')
 export class LeavittPersonCompanySelectPlayground extends LitElement {
   @state() private accessor apiService: ApiService;
+  @state() private accessor disableMenuOpenOnFocus: boolean = false;
   @query('leavitt-company-select[methods-demo]') protected accessor methodsSelect!: LeavittCompanySelect;
   @queryAll('leavitt-company-select') protected accessor inputs!: NodeListOf<LeavittCompanySelect>;
 
@@ -70,13 +71,15 @@ export class LeavittPersonCompanySelectPlayground extends LitElement {
           style="width: 400px;"
           methods-demo
           required
+          ?disableMenuOpenOnFocus=${this.disableMenuOpenOnFocus}
           .apiService=${this.apiService}
         ></leavitt-company-select>
         <section buttons>
           <md-outlined-button @click=${() => this.methodsSelect.reset()}>reset()</md-outlined-button>
           <md-outlined-button @click=${() => this.methodsSelect.focus()}>focus()</md-outlined-button>
           <md-outlined-button @click=${() => this.methodsSelect.reportValidity()}>reportValidity()</md-outlined-button>
           <md-outlined-button @click=${() => (this.methodsSelect.required = !this.methodsSelect.required)}>Toggle required</md-outlined-button>
+          <md-outlined-button @click=${() => (this.disableMenuOpenOnFocus = !this.disableMenuOpenOnFocus)}>Toggle auto open (${this.disableMenuOpenOnFocus ? 'on' : 'off'})</md-outlined-button>
 
           <md-outlined-button @click=${() => this.methodsSelect.reloadCompanies()}>reloadCompanies()</md-outlined-button>
         </section>

diff --git a/packages/web/titanium/single-select-base/single-select-base.ts b/packages/web/titanium/single-select-base/single-select-base.ts
@@ -85,6 +85,11 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends LoadWhile(Li
    */
   @property({ type: Boolean }) accessor hasTrailingIcon: boolean;
 
+  /**
+   * Prevents menu from automatically showing on focus.
+   */
+    @property({ type: Boolean }) accessor disableMenuOpenOnFocus: boolean;
+
   /**
    * Conveys additional information below the text field, such as how it should
    * be used.
@@ -353,6 +358,9 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends LoadWhile(Li
         default-focus="0"
         @keydown=${(e: KeyboardEvent) => {
           if (this.suggestions.length > 0 && (e.key == 'Enter' || e.key == 'ArrowDown' || e.key == 'ArrowUp')) {
+            if (!this.menu.open) {
+              this.menu.show();
+            }
             e.stopPropagation();
             this.menu?.activateNextItem();
           }
@@ -371,7 +379,7 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends LoadWhile(Li
               this.suggestions = this.defaultSuggestions;
             }
 
-            if (!!this.searchTerm || !!this.suggestions.length) {
+            if ((!!this.searchTerm || !!this.suggestions.length) && !this.disableMenuOpenOnFocus) {
               this.menu.show();
             }
           }