fix(Select): Fix layout shift caused by outline

src/select.css.ts

@@ -10,7 +10,6 @@ import {
     iconButtonSize,
 } from './text-field-base.css';
 import {pxToRem} from './utils/css';
-import {browserDefaultFocusOutline} from './text-field-components.css';
 
 const top = createVar();
 const left = createVar();
@@ -67,17 +66,12 @@ const selectContainerBase = style([
         cursor: 'pointer',
     }),
     {
-        borderRadius: `calc(${skinVars.borderRadii.input} - 1px)`,
+        outline: 'none',
         '@media': {
             [mq.tabletOrSmaller]: {
                 width: '100%',
             },
         },
-        ':focus': {
-            outline: browserDefaultFocusOutline,
-            border: `1px solid transparent`, // needed for outline to follow border radius in Safari
-            margin: -1, // to avoid layout shift when adding the transparent border
-        },
     },
 ]);
 

src/text-field-base.tsx

@@ -353,6 +353,7 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                 fieldRef={fieldRef}
                 readOnly={rest.readOnly}
                 dataAttributes={dataAttributes}
+                focus={focus}
             >
                 <ThemeVariant variant="default">
                     {startIcon && (

src/text-field-components.css.ts

@@ -97,6 +97,10 @@ export const browserDefaultFocusOutline = [
     '5px auto -webkit-focus-ring-color', // Chrome / Safari
 ];
 
+export const focused = style({
+    outline: browserDefaultFocusOutline,
+});
+
 export const fieldFocusRing = style({
     ':focus-within': {
         outline: browserDefaultFocusOutline,

src/text-field-components.tsx

@@ -179,6 +179,7 @@ type FieldContainerProps = {
     fullWidth?: boolean;
     readOnly?: boolean;
     dataAttributes?: DataAttributes;
+    focus?: boolean;
 };
 
 export const FieldContainer = ({
@@ -191,6 +192,7 @@ export const FieldContainer = ({
     fullWidth,
     readOnly,
     dataAttributes,
+    focus,
 }: FieldContainerProps): JSX.Element => {
     const cssVarStyles = useApplyCssVars();
     return (
@@ -210,7 +212,8 @@ export const FieldContainer = ({
                 className={classnames(
                     styles.field,
                     readOnly ? styles.background.readOnly : styles.background.default,
-                    className
+                    className,
+                    focus && styles.focused
                 )}
                 ref={fieldRef}
             >