diff --git a/components/interactive-elements.html b/components/interactive-elements.html index eeb9ed3..55a21cc 100644 --- a/components/interactive-elements.html +++ b/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 && !hasSelectedOption) { - options[0].setAttribute('aria-checked', 'true'); + if (isActive && target.dataset.activatable === 'true') { + ensurePulldownDefaultSelection(target); } 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);