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

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fix keyboard navigation & focus highlight on Select component.

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}>