Stabilize activatable pulldown with one-time default initialization

components/interactive-elements.html

@@ -649,6 +649,21 @@
       });
     });
 
+    const ensurePulldownDefaultSelection = (demo) => {
+      if (demo.dataset.defaultSelectionInitialized === 'true') {
+        return;
+      }
+      const options = demo.querySelectorAll('[data-pulldown-option]');
+      if (options.length === 0) {
+        return;
+      }
+      const hasSelectedOption = Array.from(options).some((option) => option.getAttribute('aria-checked') === 'true');
+      if (!hasSelectedOption) {
+        options[0].setAttribute('aria-checked', 'true');
+      }
+      demo.dataset.defaultSelectionInitialized = 'true';
+    };
+
     const setActivatableComponentState = (target, isActive) => {
       if (!target) {
         return;
@@ -664,9 +679,8 @@
           return;
         }
 
-        const hasSelectedOption = Array.from(options).some((option) => option.getAttribute('aria-checked') === 'true');
+        if (isActive && target.dataset.activatable === 'true') {
-        if (isActive && !hasSelectedOption) {
+          ensurePulldownDefaultSelection(target);
-          options[0].setAttribute('aria-checked', 'true');
         }
         target.dataset.open = 'false';
         trigger.setAttribute('aria-expanded', 'false');
@@ -840,6 +854,9 @@
             otherOption.setAttribute('aria-checked', String(otherOption === option));
           });
         }
+        if (pulldownDemo.dataset.activatable === 'true') {
+          pulldownDemo.dataset.defaultSelectionInitialized = 'true';
+        }
 
         updatePulldownSelectionState(pulldownDemo);