fix: code block hide the picker languages were not shown#688
Conversation
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
❌ Test ResultsStatus: Some tests failed! 🔍 Click to view failed testsTest Coverage ReportOverall Coverage Summary
Coverage by File/Directory
Coverage report generated at 2026-07-03T15:32:35.788Z |
melissag-ensemble
left a comment
There was a problem hiding this comment.
I think this fixes the bug indirectly and adds one risky change. The root cause is simpler than the diff suggests.
Root cause: CSS specificity, not JS
The existing select.classList.toggle('hidden', !areTabsGrouped) has never actually worked, because .hidden loses a specificity fight in codeblock.css: .control-bar select { display: flex } is (0,3,4) and out-specifies .hidden { display: none } at (0,3,3). So display: flex always applies and the picker never hides — that's the whole bug, and it explains why it "used to work" before the .control-bar select { display: flex } rule landed.
Minimal fix (pick one)
- CSS:
.hidden { display: none !important; } - JS:
select.style.display = areTabsGrouped ? '' : 'none';
Optional empty-string guard (data-languages="" → [""] → length 1): add .filter(Boolean) to the languages mapping.
What looks good
The aria-selected sync in the handleSelectChange rewrite is a real improvement — currently, changing the dropdown updates the visible panel but leaves the wrong tab highlighted. The rewrite (plus tab.setAttribute('heading', ...)) keeps the tab highlight in sync in both grouped and non-grouped modes. Happy to keep that.
One concern
Redefining areTabsGrouped to hasLanguagesParam && languages.length > 1 && languages.length === tabContents.length changes grouping semantics — e.g. a single data-languages="js" was grouped before and no longer is — which affects filterSelectOptions and the tab-dedup path. Can we keep the original grouping condition unless there's a specific reason it needed to change?
❌ Test ResultsStatus: Some tests failed! 🔍 Click to view failed testsTest Coverage ReportOverall Coverage Summary
Coverage by File/Directory
Coverage report generated at 2026-07-07T06:25:21.589Z |
Description
Codeblock showing language picker even though language is not given
Jira
https://jira.corp.adobe.com/browse/DEVSITE-2491
Devdocs Test URL
Previous : https://main--adp-devsite--adobedocs.aem.page/github-actions-test/blocks/codeblock/code-block-without-picklist
Update : https://devsite-2491--adp-devsite--adobedocs.aem.page/github-actions-test/blocks/codeblock/code-block-without-picklist
Regression Screenshot
Previous :

Update :
