diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js index ef5143551a..792736b12d 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js @@ -63,22 +63,21 @@ const GenerateCodeItem = ({ collection, item, onClose }) => { tabIndex={0} onClick={() => setSelectedLanguage(language)} onKeyDown={(e) => { - if (e.key === 'Tab') { + if (e.key === 'Tab' || (e.shiftKey && e.key === 'Tab')) { e.preventDefault(); const currentIndex = languages.findIndex((lang) => lang.name === selectedLanguage.name); const nextIndex = e.shiftKey ? (currentIndex - 1 + languages.length) % languages.length : (currentIndex + 1) % languages.length; setSelectedLanguage(languages[nextIndex]); - } - if (e.shiftKey && e.key === 'Tab') { - e.preventDefault(); - const currentIndex = languages.findIndex((lang) => lang.name === selectedLanguage.name); - const nextIndex = (currentIndex - 1 + languages.length) % languages.length; - setSelectedLanguage(languages[nextIndex]); + // Explicitly focus on the new active element + const nextElement = document.querySelector(`[data-language="${languages[nextIndex].name}"]`); + nextElement?.focus(); } + }} + data-language={language.name} aria-pressed={language.name === selectedLanguage.name} > {language.name} @@ -89,6 +88,7 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {