From b5ae2b2b45b5992a8f05629a802a06d420ca7f5e Mon Sep 17 00:00:00 2001
From: Pragadesh-45 <temporaryg7904@gmail.com>
Date: Mon, 6 Jan 2025 16:33:17 +0530
Subject: [PATCH] fix: enhance keyboard navigation for language selection in
 GenerateCodeItem

---
 .../CollectionItem/GenerateCodeItem/index.js       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

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 ef5143551..792736b12 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}
                   >
                     <span className="capitalize">{language.name}</span>
@@ -89,6 +88,7 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {
           <div className="flex-grow p-4">
             {isValidUrl(finalUrl) ? (
               <CodeView
+                tabIndex={-1}
                 language={selectedLanguage}
                 item={{
                   ...item,