From a011d2316a582019f386b17ab864009142c45bc7 Mon Sep 17 00:00:00 2001
From: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
Date: Thu, 22 Jun 2023 15:10:44 -0500
Subject: [PATCH] fix(core-components): Fix keyboard navigation & focus
 highlight on Select component.

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
---
 .changeset/twenty-seas-float.md                           | 5 +++++
 packages/core-components/src/components/Select/Select.tsx | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/twenty-seas-float.md

diff --git a/.changeset/twenty-seas-float.md b/.changeset/twenty-seas-float.md
new file mode 100644
index 0000000000..3ee79ba4e5
--- /dev/null
+++ b/.changeset/twenty-seas-float.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fix keyboard navigation & focus highlight on Select component.
diff --git a/packages/core-components/src/components/Select/Select.tsx b/packages/core-components/src/components/Select/Select.tsx
index dbf5601112..918ce301fb 100644
--- a/packages/core-components/src/components/Select/Select.tsx
+++ b/packages/core-components/src/components/Select/Select.tsx
@@ -43,6 +43,9 @@ const BootstrapInput = withStyles(
         'label + &': {
           marginTop: theme.spacing(3),
         },
+        '&.Mui-focused > div[role=button]': {
+          borderColor: theme.palette.primary.main,
+        },
       },
       input: {
         borderRadius: theme.shape.borderRadius,
@@ -75,7 +78,7 @@ const useStyles = makeStyles(
   (theme: Theme) =>
     createStyles({
       formControl: {
-        margin: `${theme.spacing(1)} 0px`,
+        margin: theme.spacing(1, 0),
         maxWidth: 300,
       },
       label: {
@@ -212,7 +215,6 @@ export function SelectComponent(props: SelectProps) {
           onClose={handleClose}
           input={<BootstrapInput />}
           label={label}
-          tabIndex={0}
           renderValue={s =>
             multiple && (value as any[]).length !== 0 ? (
               <Box className={classes.chips}>