refactor: Migrate dropdown, select and date-picker to async public API (

#1299) Co-authored-by: Simeon Simeonoff <[email protected]>
IgniteUI · Jul 10, 2024 · ccfb847 · ccfb847
1 parent 88d55a9
commit ccfb847
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 35 deletions.
diff --git a/src/components/common/mixins/combo-box.ts b/src/components/common/mixins/combo-box.ts
@@ -74,10 +74,10 @@ export abstract class IgcBaseComboBoxLikeComponent extends LitElement {
 
     if (emitEvent) {
       await this.updateComplete;
-      return this.emitClosed();
+      this.emitClosed();
     }
 
-    return false;
+    return true;
   }
 
   protected async _show(emitEvent = false) {
@@ -89,25 +89,25 @@ export abstract class IgcBaseComboBoxLikeComponent extends LitElement {
 
     if (emitEvent) {
       await this.updateComplete;
-      return this.emitOpened();
+      this.emitOpened();
     }
 
-    return false;
+    return true;
   }
 
   /** Shows the component. */
-  public show() {
-    this._show();
+  public async show(): Promise<boolean> {
+    return this._show();
   }
 
   /** Hides the component. */
-  public hide() {
-    this._hide();
+  public async hide(): Promise<boolean> {
+    return this._hide();
   }
 
   /** Toggles the open state of the component. */
-  public toggle() {
-    this.open ? this.hide() : this.show();
+  public async toggle(): Promise<boolean> {
+    return this.open ? this.hide() : this.show();
   }
 }
 

diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
@@ -96,11 +96,11 @@ export default class IgcDropdownComponent extends SizableMixin(
   private _keyBindings: ReturnType<typeof addKeybindings>;
 
   private _rootScrollController = addRootScrollHandler(this, {
-    hideCallback: () => this._hide(true),
+    hideCallback: this.handleClosing,
   });
 
   private _rootClickController = addRootClickHandler(this, {
-    hideCallback: () => this._hide(true),
+    hideCallback: this.handleClosing,
   });
 
   @state()
@@ -291,6 +291,10 @@ export default class IgcDropdownComponent extends SizableMixin(
     this._selectItem(this._activeItem);
   }
 
+  protected handleClosing() {
+    this._hide(true);
+  }
+
   private activateItem(item: IgcDropdownItemComponent) {
     if (this._activeItem) {
       this._activeItem.active = false;
@@ -350,17 +354,19 @@ export default class IgcDropdownComponent extends SizableMixin(
 
   /* blazorSuppress */
   /** Shows the component. */
-  public override show(target?: HTMLElement | string) {
+  public override async show(target?: HTMLElement | string): Promise<boolean> {
     if (target) {
       this._setTarget(target);
     }
-    super.show();
+    return super.show();
   }
 
   /* blazorSuppress */
   /** Toggles the open state of the component. */
-  public override toggle(target?: HTMLElement | string) {
-    this.open ? this.hide() : this.show(target);
+  public override async toggle(
+    target?: HTMLElement | string
+  ): Promise<boolean> {
+    return this.open ? this.hide() : this.show(target);
   }
 
   /** Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null. */

diff --git a/src/components/select/select.ts b/src/components/select/select.ts
@@ -125,11 +125,11 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
   private _lastKeyTime = 0;
 
   private _rootClickController = addRootClickHandler(this, {
-    hideCallback: () => this._hide(true),
+    hideCallback: this.handleClosing,
   });
 
   private _rootScrollController = addRootScrollHandler(this, {
-    hideCallback: () => this._hide(true),
+    hideCallback: this.handleClosing,
   });
 
   private get isMaterialTheme() {
@@ -304,6 +304,12 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
     this.addEventListener('focusout', this.handleFocusOut);
   }
 
+  protected override createRenderRoot() {
+    const root = super.createRenderRoot();
+    root.addEventListener('slotchange', () => this.requestUpdate());
+    return root;
+  }
+
   protected override async firstUpdated() {
     await this.updateComplete;
     const selected = setInitialSelectionState(this.items);
@@ -446,9 +452,8 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
     this.open ? this._navigateToActiveItem(item) : this._selectItem(item);
   }
 
-  /** Monitor input slot changes and request update */
-  protected inputSlotChanged() {
-    this.requestUpdate();
+  protected handleClosing() {
+    this._hide(true);
   }
 
   private activateItem(item: IgcSelectItemComponent) {
@@ -595,19 +600,19 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
 
     return html`
       <span slot=${prefixName}>
-        <slot name="prefix" @slotchange=${this.inputSlotChanged}></slot>
+        <slot name="prefix"></slot>
       </span>
 
       <span slot=${suffixName}>
-        <slot name="suffix" @slotchange=${this.inputSlotChanged}></slot>
+        <slot name="suffix"></slot>
       </span>
     `;
   }
 
   protected renderToggleIcon() {
     const parts = partNameMap({ 'toggle-icon': true, filled: this.value! });
     const iconHidden = this.open && this.hasExpandedIcon;
-    const iconExpandedHidden = !this.hasExpandedIcon || !this.open;
+    const iconExpandedHidden = !(this.hasExpandedIcon && this.open);
 
     const openIcon = this.isMaterialTheme
       ? 'keyboard_arrow_up'
@@ -618,21 +623,13 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
 
     return html`
       <span slot="suffix" part=${parts} aria-hidden="true">
-        <slot
-          name="toggle-icon"
-          ?hidden=${iconHidden}
-          @slotchange=${this.inputSlotChanged}
-        >
+        <slot name="toggle-icon" ?hidden=${iconHidden}>
           <igc-icon
             name=${this.open ? openIcon : closeIcon}
             collection="internal"
           ></igc-icon>
         </slot>
-        <slot
-          name="toggle-icon-expanded"
-          ?hidden=${iconExpandedHidden}
-          @slotchange=${this.inputSlotChanged}
-        ></slot>
+        <slot name="toggle-icon-expanded" ?hidden=${iconExpandedHidden}></slot>
       </span>
     `;
   }
@@ -645,7 +642,7 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
         slot="anchor"
         ?hidden=${!this.hasHelperText}
       >
-        <slot name="helper-text" @slotchange=${this.inputSlotChanged}></slot>
+        <slot name="helper-text"></slot>
       </div>
     `;
   }