From 36544f22aae050f1a8162fd27173011254f4a711 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 27 Apr 2022 12:38:54 -0400
Subject: [PATCH] make Select snapshots deterministic

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../closing-preferences.test.tsx.snap         | 48 +++++++++----------
 ...on-to-application-preferences.test.ts.snap | 24 +++++-----
 ...igation-to-editor-preferences.test.ts.snap | 36 +++++++-------
 ...tension-specific-preferences.test.tsx.snap | 48 +++++++++----------
 ...ion-to-kubernetes-preferences.test.ts.snap | 36 +++++++-------
 ...vigation-to-proxy-preferences.test.ts.snap | 24 +++++-----
 ...ion-to-telemetry-preferences.test.tsx.snap | 48 +++++++++----------
 ...ation-to-terminal-preferences.test.ts.snap | 30 ++++++------
 ...gation-using-application-menu.test.ts.snap | 24 +++++-----
 src/renderer/components/select/select.tsx     | 11 +++--
 10 files changed, 166 insertions(+), 163 deletions(-)

diff --git a/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
index eafa941325..cb4973203d 100644
--- a/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
+++ b/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
@@ -124,7 +124,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-6-live-region"
+                id="react-select-theme-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -140,7 +140,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-6-placeholder"
+                    id="react-select-theme-input-placeholder"
                   >
                     Select...
                   </div>
@@ -150,7 +150,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-6-placeholder"
+                      aria-describedby="react-select-theme-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -209,7 +209,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-7-live-region"
+                id="react-select-extension-install-registry-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -225,7 +225,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-7-placeholder"
+                    id="react-select-extension-install-registry-input-placeholder"
                   >
                     Select...
                   </div>
@@ -235,7 +235,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-7-placeholder"
+                      aria-describedby="react-select-extension-install-registry-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -344,7 +344,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-8-live-region"
+                id="react-select-update-channel-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -360,7 +360,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-8-placeholder"
+                    id="react-select-update-channel-input-placeholder"
                   >
                     Select...
                   </div>
@@ -370,7 +370,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-8-placeholder"
+                      aria-describedby="react-select-update-channel-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -429,7 +429,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-9-live-region"
+                id="react-select-timezone-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -445,7 +445,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-9-placeholder"
+                    id="react-select-timezone-input-placeholder"
                   >
                     Select...
                   </div>
@@ -455,7 +455,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-9-placeholder"
+                      aria-describedby="react-select-timezone-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -822,7 +822,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-2-live-region"
+                id="react-select-theme-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -838,7 +838,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-2-placeholder"
+                    id="react-select-theme-input-placeholder"
                   >
                     Select...
                   </div>
@@ -848,7 +848,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-2-placeholder"
+                      aria-describedby="react-select-theme-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -907,7 +907,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-3-live-region"
+                id="react-select-extension-install-registry-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -923,7 +923,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-3-placeholder"
+                    id="react-select-extension-install-registry-input-placeholder"
                   >
                     Select...
                   </div>
@@ -933,7 +933,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-3-placeholder"
+                      aria-describedby="react-select-extension-install-registry-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -1042,7 +1042,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-4-live-region"
+                id="react-select-update-channel-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -1058,7 +1058,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-4-placeholder"
+                    id="react-select-update-channel-input-placeholder"
                   >
                     Select...
                   </div>
@@ -1068,7 +1068,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-4-placeholder"
+                      aria-describedby="react-select-update-channel-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -1127,7 +1127,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-5-live-region"
+                id="react-select-timezone-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -1143,7 +1143,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-5-placeholder"
+                    id="react-select-timezone-input-placeholder"
                   >
                     Select...
                   </div>
@@ -1153,7 +1153,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-5-placeholder"
+                      aria-describedby="react-select-timezone-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
index 638c465bd7..f67337e80c 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
@@ -314,7 +314,7 @@ exports[`preferences - navigation to application preferences given in some child
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-2-live-region"
+                id="react-select-theme-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -330,7 +330,7 @@ exports[`preferences - navigation to application preferences given in some child
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-2-placeholder"
+                    id="react-select-theme-input-placeholder"
                   >
                     Select...
                   </div>
@@ -340,7 +340,7 @@ exports[`preferences - navigation to application preferences given in some child
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-2-placeholder"
+                      aria-describedby="react-select-theme-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -399,7 +399,7 @@ exports[`preferences - navigation to application preferences given in some child
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-3-live-region"
+                id="react-select-extension-install-registry-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -415,7 +415,7 @@ exports[`preferences - navigation to application preferences given in some child
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-3-placeholder"
+                    id="react-select-extension-install-registry-input-placeholder"
                   >
                     Select...
                   </div>
@@ -425,7 +425,7 @@ exports[`preferences - navigation to application preferences given in some child
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-3-placeholder"
+                      aria-describedby="react-select-extension-install-registry-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -534,7 +534,7 @@ exports[`preferences - navigation to application preferences given in some child
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-4-live-region"
+                id="react-select-update-channel-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -550,7 +550,7 @@ exports[`preferences - navigation to application preferences given in some child
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-4-placeholder"
+                    id="react-select-update-channel-input-placeholder"
                   >
                     Select...
                   </div>
@@ -560,7 +560,7 @@ exports[`preferences - navigation to application preferences given in some child
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-4-placeholder"
+                      aria-describedby="react-select-update-channel-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -619,7 +619,7 @@ exports[`preferences - navigation to application preferences given in some child
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-5-live-region"
+                id="react-select-timezone-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -635,7 +635,7 @@ exports[`preferences - navigation to application preferences given in some child
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-5-placeholder"
+                    id="react-select-timezone-input-placeholder"
                   >
                     Select...
                   </div>
@@ -645,7 +645,7 @@ exports[`preferences - navigation to application preferences given in some child
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-5-placeholder"
+                      aria-describedby="react-select-timezone-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
index 32c1872674..4e92ac4f95 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
@@ -112,7 +112,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-2-live-region"
+                id="react-select-theme-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -128,7 +128,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-2-placeholder"
+                    id="react-select-theme-input-placeholder"
                   >
                     Select...
                   </div>
@@ -138,7 +138,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-2-placeholder"
+                      aria-describedby="react-select-theme-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -197,7 +197,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-3-live-region"
+                id="react-select-extension-install-registry-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -213,7 +213,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-3-placeholder"
+                    id="react-select-extension-install-registry-input-placeholder"
                   >
                     Select...
                   </div>
@@ -223,7 +223,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-3-placeholder"
+                      aria-describedby="react-select-extension-install-registry-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -332,7 +332,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-4-live-region"
+                id="react-select-update-channel-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -348,7 +348,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-4-placeholder"
+                    id="react-select-update-channel-input-placeholder"
                   >
                     Select...
                   </div>
@@ -358,7 +358,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-4-placeholder"
+                      aria-describedby="react-select-update-channel-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -417,7 +417,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-5-live-region"
+                id="react-select-timezone-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -433,7 +433,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-5-placeholder"
+                    id="react-select-timezone-input-placeholder"
                   >
                     Select...
                   </div>
@@ -443,7 +443,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-5-placeholder"
+                      aria-describedby="react-select-timezone-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -663,7 +663,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 >
                   <span
                     class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-10-live-region"
+                    id="react-select-minimap-input-live-region"
                   />
                   <span
                     aria-atomic="false"
@@ -679,7 +679,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                     >
                       <div
                         class="Select__placeholder css-14el2xx-placeholder"
-                        id="react-select-10-placeholder"
+                        id="react-select-minimap-input-placeholder"
                       >
                         Select...
                       </div>
@@ -689,7 +689,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                       >
                         <input
                           aria-autocomplete="list"
-                          aria-describedby="react-select-10-placeholder"
+                          aria-describedby="react-select-minimap-input-placeholder"
                           aria-expanded="false"
                           aria-haspopup="true"
                           autocapitalize="none"
@@ -747,7 +747,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-11-live-region"
+                id="react-select-editor-line-numbers-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -763,7 +763,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-11-placeholder"
+                    id="react-select-editor-line-numbers-input-placeholder"
                   >
                     Select...
                   </div>
@@ -773,7 +773,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-11-placeholder"
+                      aria-describedby="react-select-editor-line-numbers-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
index 67e4bce23a..d3f42e6d63 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
@@ -112,7 +112,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-2-live-region"
+                id="react-select-theme-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -128,7 +128,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-2-placeholder"
+                    id="react-select-theme-input-placeholder"
                   >
                     Select...
                   </div>
@@ -138,7 +138,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-2-placeholder"
+                      aria-describedby="react-select-theme-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -197,7 +197,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-3-live-region"
+                id="react-select-extension-install-registry-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -213,7 +213,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-3-placeholder"
+                    id="react-select-extension-install-registry-input-placeholder"
                   >
                     Select...
                   </div>
@@ -223,7 +223,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-3-placeholder"
+                      aria-describedby="react-select-extension-install-registry-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -332,7 +332,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-4-live-region"
+                id="react-select-update-channel-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -348,7 +348,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-4-placeholder"
+                    id="react-select-update-channel-input-placeholder"
                   >
                     Select...
                   </div>
@@ -358,7 +358,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-4-placeholder"
+                      aria-describedby="react-select-update-channel-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -417,7 +417,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-5-live-region"
+                id="react-select-timezone-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -433,7 +433,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-5-placeholder"
+                    id="react-select-timezone-input-placeholder"
                   >
                     Select...
                   </div>
@@ -443,7 +443,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-5-placeholder"
+                      aria-describedby="react-select-timezone-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -652,7 +652,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-6-live-region"
+                id="react-select-theme-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -668,7 +668,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-6-placeholder"
+                    id="react-select-theme-input-placeholder"
                   >
                     Select...
                   </div>
@@ -678,7 +678,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-6-placeholder"
+                      aria-describedby="react-select-theme-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -737,7 +737,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-7-live-region"
+                id="react-select-extension-install-registry-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -753,7 +753,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-7-placeholder"
+                    id="react-select-extension-install-registry-input-placeholder"
                   >
                     Select...
                   </div>
@@ -763,7 +763,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-7-placeholder"
+                      aria-describedby="react-select-extension-install-registry-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -872,7 +872,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-8-live-region"
+                id="react-select-update-channel-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -888,7 +888,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-8-placeholder"
+                    id="react-select-update-channel-input-placeholder"
                   >
                     Select...
                   </div>
@@ -898,7 +898,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-8-placeholder"
+                      aria-describedby="react-select-update-channel-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -957,7 +957,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-9-live-region"
+                id="react-select-timezone-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -973,7 +973,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-9-placeholder"
+                    id="react-select-timezone-input-placeholder"
                   >
                     Select...
                   </div>
@@ -983,7 +983,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-9-placeholder"
+                      aria-describedby="react-select-timezone-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
index 37b4e4e3eb..2e9b7722aa 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
@@ -112,7 +112,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-2-live-region"
+                id="react-select-theme-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -128,7 +128,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-2-placeholder"
+                    id="react-select-theme-input-placeholder"
                   >
                     Select...
                   </div>
@@ -138,7 +138,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-2-placeholder"
+                      aria-describedby="react-select-theme-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -197,7 +197,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-3-live-region"
+                id="react-select-extension-install-registry-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -213,7 +213,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-3-placeholder"
+                    id="react-select-extension-install-registry-input-placeholder"
                   >
                     Select...
                   </div>
@@ -223,7 +223,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-3-placeholder"
+                      aria-describedby="react-select-extension-install-registry-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -332,7 +332,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-4-live-region"
+                id="react-select-update-channel-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -348,7 +348,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-4-placeholder"
+                    id="react-select-update-channel-input-placeholder"
                   >
                     Select...
                   </div>
@@ -358,7 +358,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-4-placeholder"
+                      aria-describedby="react-select-update-channel-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -417,7 +417,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-5-live-region"
+                id="react-select-timezone-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -433,7 +433,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-5-placeholder"
+                    id="react-select-timezone-input-placeholder"
                   >
                     Select...
                   </div>
@@ -443,7 +443,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-5-placeholder"
+                      aria-describedby="react-select-timezone-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -659,7 +659,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
               >
                 <span
                   class="css-1f43avz-a11yText-A11yText"
-                  id="react-select-10-live-region"
+                  id="react-select-download-mirror-input-live-region"
                 />
                 <span
                   aria-atomic="false"
@@ -675,7 +675,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                   >
                     <div
                       class="Select__placeholder css-14el2xx-placeholder"
-                      id="react-select-10-placeholder"
+                      id="react-select-download-mirror-input-placeholder"
                     >
                       Download mirror for kubectl
                     </div>
@@ -685,7 +685,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                     >
                       <input
                         aria-autocomplete="list"
-                        aria-describedby="react-select-10-placeholder"
+                        aria-describedby="react-select-download-mirror-input-placeholder"
                         aria-expanded="false"
                         aria-haspopup="true"
                         autocapitalize="none"
@@ -840,7 +840,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                 >
                   <span
                     class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-11-live-region"
+                    id="react-select-HelmRepoSelect-live-region"
                   />
                   <span
                     aria-atomic="false"
@@ -856,7 +856,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                     >
                       <div
                         class="Select__placeholder css-14el2xx-placeholder"
-                        id="react-select-11-placeholder"
+                        id="react-select-HelmRepoSelect-placeholder"
                       >
                         Repositories
                       </div>
@@ -866,7 +866,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                       >
                         <input
                           aria-autocomplete="list"
-                          aria-describedby="react-select-11-placeholder"
+                          aria-describedby="react-select-HelmRepoSelect-placeholder"
                           aria-expanded="false"
                           aria-haspopup="true"
                           autocapitalize="none"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
index e1e2ac09c5..8c6507ef0a 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
@@ -112,7 +112,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-2-live-region"
+                id="react-select-theme-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -128,7 +128,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-2-placeholder"
+                    id="react-select-theme-input-placeholder"
                   >
                     Select...
                   </div>
@@ -138,7 +138,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-2-placeholder"
+                      aria-describedby="react-select-theme-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -197,7 +197,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-3-live-region"
+                id="react-select-extension-install-registry-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -213,7 +213,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-3-placeholder"
+                    id="react-select-extension-install-registry-input-placeholder"
                   >
                     Select...
                   </div>
@@ -223,7 +223,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-3-placeholder"
+                      aria-describedby="react-select-extension-install-registry-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -332,7 +332,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-4-live-region"
+                id="react-select-update-channel-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -348,7 +348,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-4-placeholder"
+                    id="react-select-update-channel-input-placeholder"
                   >
                     Select...
                   </div>
@@ -358,7 +358,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-4-placeholder"
+                      aria-describedby="react-select-update-channel-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -417,7 +417,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-5-live-region"
+                id="react-select-timezone-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -433,7 +433,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-5-placeholder"
+                    id="react-select-timezone-input-placeholder"
                   >
                     Select...
                   </div>
@@ -443,7 +443,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-5-placeholder"
+                      aria-describedby="react-select-timezone-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
index f82e48b4fe..80f5b61bb1 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
@@ -300,7 +300,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-2-live-region"
+                id="react-select-theme-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -316,7 +316,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-2-placeholder"
+                    id="react-select-theme-input-placeholder"
                   >
                     Select...
                   </div>
@@ -326,7 +326,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-2-placeholder"
+                      aria-describedby="react-select-theme-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -385,7 +385,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-3-live-region"
+                id="react-select-extension-install-registry-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -401,7 +401,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-3-placeholder"
+                    id="react-select-extension-install-registry-input-placeholder"
                   >
                     Select...
                   </div>
@@ -411,7 +411,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-3-placeholder"
+                      aria-describedby="react-select-extension-install-registry-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -520,7 +520,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-4-live-region"
+                id="react-select-update-channel-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -536,7 +536,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-4-placeholder"
+                    id="react-select-update-channel-input-placeholder"
                   >
                     Select...
                   </div>
@@ -546,7 +546,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-4-placeholder"
+                      aria-describedby="react-select-update-channel-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -605,7 +605,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-5-live-region"
+                id="react-select-timezone-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -621,7 +621,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-5-placeholder"
+                    id="react-select-timezone-input-placeholder"
                   >
                     Select...
                   </div>
@@ -631,7 +631,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-5-placeholder"
+                      aria-describedby="react-select-timezone-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -840,7 +840,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-6-live-region"
+                id="react-select-theme-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -856,7 +856,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-6-placeholder"
+                    id="react-select-theme-input-placeholder"
                   >
                     Select...
                   </div>
@@ -866,7 +866,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-6-placeholder"
+                      aria-describedby="react-select-theme-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -925,7 +925,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-7-live-region"
+                id="react-select-extension-install-registry-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -941,7 +941,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-7-placeholder"
+                    id="react-select-extension-install-registry-input-placeholder"
                   >
                     Select...
                   </div>
@@ -951,7 +951,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-7-placeholder"
+                      aria-describedby="react-select-extension-install-registry-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -1060,7 +1060,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-8-live-region"
+                id="react-select-update-channel-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -1076,7 +1076,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-8-placeholder"
+                    id="react-select-update-channel-input-placeholder"
                   >
                     Select...
                   </div>
@@ -1086,7 +1086,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-8-placeholder"
+                      aria-describedby="react-select-update-channel-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -1145,7 +1145,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-9-live-region"
+                id="react-select-timezone-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -1161,7 +1161,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-9-placeholder"
+                    id="react-select-timezone-input-placeholder"
                   >
                     Select...
                   </div>
@@ -1171,7 +1171,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-9-placeholder"
+                      aria-describedby="react-select-timezone-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
index 67c551c111..5e5934c3bb 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
@@ -112,7 +112,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-2-live-region"
+                id="react-select-theme-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -128,7 +128,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-2-placeholder"
+                    id="react-select-theme-input-placeholder"
                   >
                     Select...
                   </div>
@@ -138,7 +138,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-2-placeholder"
+                      aria-describedby="react-select-theme-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -197,7 +197,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-3-live-region"
+                id="react-select-extension-install-registry-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -213,7 +213,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-3-placeholder"
+                    id="react-select-extension-install-registry-input-placeholder"
                   >
                     Select...
                   </div>
@@ -223,7 +223,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-3-placeholder"
+                      aria-describedby="react-select-extension-install-registry-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -332,7 +332,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-4-live-region"
+                id="react-select-update-channel-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -348,7 +348,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-4-placeholder"
+                    id="react-select-update-channel-input-placeholder"
                   >
                     Select...
                   </div>
@@ -358,7 +358,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-4-placeholder"
+                      aria-describedby="react-select-update-channel-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -417,7 +417,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-5-live-region"
+                id="react-select-timezone-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -433,7 +433,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-5-placeholder"
+                    id="react-select-timezone-input-placeholder"
                   >
                     Select...
                   </div>
@@ -443,7 +443,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-5-placeholder"
+                      aria-describedby="react-select-timezone-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -684,7 +684,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-10-live-region"
+                id="react-select-terminal-theme-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -700,7 +700,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-10-placeholder"
+                    id="react-select-terminal-theme-input-placeholder"
                   >
                     Select...
                   </div>
@@ -710,7 +710,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-10-placeholder"
+                      aria-describedby="react-select-terminal-theme-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
index d92a09037f..141279f4e4 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
@@ -114,7 +114,7 @@ exports[`preferences - navigation using application menu when navigating to pref
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-2-live-region"
+                id="react-select-theme-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -130,7 +130,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-2-placeholder"
+                    id="react-select-theme-input-placeholder"
                   >
                     Select...
                   </div>
@@ -140,7 +140,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-2-placeholder"
+                      aria-describedby="react-select-theme-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -199,7 +199,7 @@ exports[`preferences - navigation using application menu when navigating to pref
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-3-live-region"
+                id="react-select-extension-install-registry-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -215,7 +215,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-3-placeholder"
+                    id="react-select-extension-install-registry-input-placeholder"
                   >
                     Select...
                   </div>
@@ -225,7 +225,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-3-placeholder"
+                      aria-describedby="react-select-extension-install-registry-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -334,7 +334,7 @@ exports[`preferences - navigation using application menu when navigating to pref
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-4-live-region"
+                id="react-select-update-channel-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -350,7 +350,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-4-placeholder"
+                    id="react-select-update-channel-input-placeholder"
                   >
                     Select...
                   </div>
@@ -360,7 +360,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-4-placeholder"
+                      aria-describedby="react-select-update-channel-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -419,7 +419,7 @@ exports[`preferences - navigation using application menu when navigating to pref
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-5-live-region"
+                id="react-select-timezone-input-live-region"
               />
               <span
                 aria-atomic="false"
@@ -435,7 +435,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-5-placeholder"
+                    id="react-select-timezone-input-placeholder"
                   >
                     Select...
                   </div>
@@ -445,7 +445,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-5-placeholder"
+                      aria-describedby="react-select-timezone-input-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
diff --git a/src/renderer/components/select/select.tsx b/src/renderer/components/select/select.tsx
index 3026257e13..cde8686b21 100644
--- a/src/renderer/components/select/select.tsx
+++ b/src/renderer/components/select/select.tsx
@@ -159,7 +159,10 @@ class NonInjectedSelect<
     const {
       className,
       menuClass,
-      components = {},
+      components: {
+        Menu: WrappedMenu = Menu,
+        ...components
+      } = {},
       styles,
       value = null,
       options,
@@ -168,7 +171,6 @@ class NonInjectedSelect<
       onChange,
       ...props
     } = this.props;
-    const WrappedMenu = components.Menu ?? Menu;
 
     const convertedOptions = options.map(option => (
       typeof option === "string"
@@ -193,6 +195,7 @@ class NonInjectedSelect<
           }),
           ...styles,
         }}
+        instanceId={inputId}
         inputId={inputId}
         filterOption={defaultFilter} // This is done because the default filter crashes on symbols
         isMulti={isMulti}
@@ -204,10 +207,10 @@ class NonInjectedSelect<
         onChange={action(onChange)} // This is done so that all changes are actionable
         components={{
           ...components,
-          Menu: props => (
+          Menu: ({ className, ...props }) => (
             <WrappedMenu
               {...props}
-              className={cssNames(menuClass, this.themeClass, props.className)}
+              className={cssNames(menuClass, this.themeClass, className)}
             />
           ),
         }}