fix(masthead-v2): ensure L1 dropdown targets exist

kennylam · Dec 19, 2023 · fc65086 · fc65086
1 parent c9609f7
commit fc65086
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/packages/web-components/src/components/masthead/masthead-l1.ts b/packages/web-components/src/components/masthead/masthead-l1.ts
@@ -453,6 +453,7 @@ class DDSMastheadL1 extends StableSelectorMixin(LitElement) {
           ${title}${ChevronDown16()}
         </button>
         <div
+          data-dropdown-target
           class="${prefix}--masthead__l1-dropdown ${prefix}--masthead__l1-dropdown__${columns}-col">
           ${announcement
             ? html`<div class="${prefix}--masthead__l1-dropdown-announcement">
@@ -557,7 +558,7 @@ class DDSMastheadL1 extends StableSelectorMixin(LitElement) {
       <button class="${prefix}--masthead__l1-title" @click=${toggleSubsection}>
         ${title}${ChevronDown16()}
       </button>
-      <ul class="${prefix}--masthead__l1-dropdown">
+      <ul data-dropdown-target class="${prefix}--masthead__l1-dropdown">
         ${url
           ? html` <li>
               <a class="${prefix}--masthead__l1-dropdown-item" href="${url}">
@@ -623,7 +624,9 @@ class DDSMastheadL1 extends StableSelectorMixin(LitElement) {
           @click=${toggleSubsection}>
           ${title}${ChevronDown16()}
         </button>
-        <div class="${prefix}--masthead__l1-dropdown-subsection">
+        <div
+          data-dropdown-target
+          class="${prefix}--masthead__l1-dropdown-subsection">
           ${announcement
             ? html`<div class="${prefix}--masthead__l1-dropdown-announcement">
                 ${unsafeHTML(announcement)}
@@ -680,7 +683,7 @@ class DDSMastheadL1 extends StableSelectorMixin(LitElement) {
     const { currentTarget } = event;
     const button = currentTarget as HTMLElement;
     const dropdown = button.parentNode?.querySelector(
-      `.${prefix}--masthead__l1-dropdown`
+      '[data-dropdown-target]'
     ) as HTMLElement;
     const isOpen = dropdown?.classList.contains('is-open');