fix: simplify logic on calculating hasTriggerContent in dropdown

AlaskaAirlines · Jan 10, 2025 · f1129cc · f1129cc
1 parent 8bb0efc
commit f1129cc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 39 deletions.
diff --git a/components/dropdown/src/auro-dropdown.js b/components/dropdown/src/auro-dropdown.js
@@ -80,7 +80,7 @@ export class AuroDropdown extends LitElement {
     /**
      * @private
      */
-    this._hasTriggerContent = false;
+    this.hasTriggerContent = false;
 
     /**
      * @private
@@ -208,7 +208,12 @@ export class AuroDropdown extends LitElement {
       /**
        * @private
        */
-      tabIndex: { type: Number }
+      tabIndex: { type: Number },
+
+      /**
+       * @private
+       */
+      hasTriggerContent: {type: Boolean },
     };
   }
 
@@ -220,39 +225,6 @@ export class AuroDropdown extends LitElement {
     ];
   }
 
-  /**
-   * Sets the value of the hasTriggerContent property and requests an update if changed.
-   *
-   * This setter updates the internal `_hasTriggerContent` property only if the new value differs
-   * from the current value. If a change is detected, it triggers a request for the component to
-   * update, ensuring that UI elements are refreshed accordingly.
-   *
-   * @private
-   * @setter hasTriggerContent
-   * @param {boolean} value - The new value indicating whether the trigger content is present.
-   * @returns {void}
-   */
-  set hasTriggerContent(value) {
-    if (value !== this._hasTriggerContent) {
-      this._hasTriggerContent = value;
-
-      // requestUpdate to re-render with the latest value on `#triggerLabel.hasTrigger`
-      this.requestUpdate();
-    }
-  }
-
-  /**
-   * Retrieves the value of the hasTriggerContent property.
-   *
-   * @private
-   * @getter hasTriggerContent
-   * @type {boolean}
-   * @returns {boolean} The current value of the hasTriggerContent property.
-   */
-  get hasTriggerContent() {
-    return this._hasTriggerContent;
-  }
-
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
@@ -351,10 +323,15 @@ export class AuroDropdown extends LitElement {
 
     if (this.triggerContentSlot) {
       this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
+        if (slot.textContent.trim()) {
+          return true;
+        }
         const slotInSlot = slot.querySelector('slot');
-        const slotsInSlotNodes = slotInSlot ? slotInSlot.assignedNodes() : null;
-        const hasInnerContent = slotsInSlotNodes ? slotsInSlotNodes.some((ss) => Boolean(ss.textContent.trim())) : false;
-        return hasInnerContent || Boolean(slot.textContent.trim());
+        if (!slotInSlot) {
+          return false;
+        }
+        const slotsInSlotNodes = slotInSlot.assignedNodes();
+        return slotsInSlotNodes.some((ss) => Boolean(ss.textContent.trim()));
       });
     } else {
       this.hasTriggerContent = false;

diff --git a/components/select/src/auro-select.js b/components/select/src/auro-select.js
@@ -234,7 +234,7 @@ export class AuroSelect extends LitElement {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
-    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
+
     // racing condition on custom-select with custom-menu
     if (!this.menu) {
       setTimeout(() => {
@@ -243,6 +243,7 @@ export class AuroSelect extends LitElement {
       return;
     }
 
+    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
     this.menu.setAttribute('aria-hidden', 'true');
 
     this.generateOptionsArray();