diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx
index 7f3736ebc5b..797e68a86b9 100644
--- a/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx
@@ -30,17 +30,14 @@ describe('<SelectArrayInput />', () => {
     });
 
     it('should use the input parameter value as the initial input value', () => {
-        const { getByLabelText } = render(
+        const { getByDisplayValue } = render(
             <Form
                 initialValues={{ categories: ['programming', 'lifestyle'] }}
                 onSubmit={jest.fn()}
                 render={() => <SelectArrayInput {...defaultProps} />}
             />
         );
-        const input = getByLabelText(
-            'resources.posts.fields.categories'
-        ) as HTMLInputElement;
-        expect(input.value).toBe('programming,lifestyle');
+        expect(getByDisplayValue('programming,lifestyle')).not.toBeNull();
     });
 
     it('should reveal choices on click', () => {
@@ -60,7 +57,7 @@ describe('<SelectArrayInput />', () => {
     });
 
     it('should use optionValue as value identifier', () => {
-        const { getByRole, getByText, getByLabelText } = render(
+        const { getByRole, getByText, getByDisplayValue } = render(
             <Form
                 onSubmit={jest.fn()}
                 render={() => (
@@ -76,13 +73,11 @@ describe('<SelectArrayInput />', () => {
         );
         fireEvent.mouseDown(getByRole('button'));
         fireEvent.click(getByText('Programming'));
-        expect(getByLabelText('resources.posts.fields.categories').value).toBe(
-            'programming'
-        );
+        expect(getByDisplayValue('programming')).not.toBeNull();
     });
 
     it('should use optionValue including "." as value identifier', () => {
-        const { getByRole, getByText, getByLabelText } = render(
+        const { getByRole, getByText, getByDisplayValue } = render(
             <Form
                 onSubmit={jest.fn()}
                 render={() => (
@@ -101,9 +96,7 @@ describe('<SelectArrayInput />', () => {
         );
         fireEvent.mouseDown(getByRole('button'));
         fireEvent.click(getByText('Programming'));
-        expect(getByLabelText('resources.posts.fields.categories').value).toBe(
-            'programming'
-        );
+        expect(getByDisplayValue('programming')).not.toBeNull();
     });
 
     it('should use optionText with a string value as text identifier', () => {
diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
index 874d81da42a..bf7034834fa 100644
--- a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
+++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
@@ -1,12 +1,16 @@
-import React, { FunctionComponent, useCallback } from 'react';
+import React, {
+    FunctionComponent,
+    useCallback,
+    useRef,
+    useState,
+    useEffect,
+} from 'react';
 import PropTypes from 'prop-types';
 import {
     makeStyles,
     Select,
     MenuItem,
     InputLabel,
-    Input,
-    FilledInput,
     FormHelperText,
     FormControl,
     Chip,
@@ -161,14 +165,18 @@ const SelectArrayInput: FunctionComponent<
         ...rest
     } = props;
     const classes = useStyles(props);
+    const inputLabel = useRef(null);
+    const [labelWidth, setLabelWidth] = useState(0);
+    useEffect(() => {
+        setLabelWidth(inputLabel.current.offsetWidth);
+    }, []);
+
     const { getChoiceText, getChoiceValue } = useChoices({
         optionText,
         optionValue,
         translateChoice,
     });
-
     const {
-        id,
         input,
         isRequired,
         meta: { error, touched },
@@ -201,7 +209,6 @@ const SelectArrayInput: FunctionComponent<
         },
         [getChoiceValue, renderMenuItemOption]
     );
-
     return (
         <FormControl
             margin={margin}
@@ -211,9 +218,8 @@ const SelectArrayInput: FunctionComponent<
             {...sanitizeRestProps(rest)}
         >
             <InputLabel
-                htmlFor={id}
-                shrink
-                variant={variant}
+                ref={inputLabel}
+                id={`${label}-outlined-label`}
                 error={touched && !!error}
             >
                 <FieldTitle
@@ -225,14 +231,8 @@ const SelectArrayInput: FunctionComponent<
             </InputLabel>
             <Select
                 autoWidth
+                labelId={`${label}-outlined-label`}
                 multiple
-                input={
-                    variant === 'standard' ? (
-                        <Input id={id} />
-                    ) : (
-                        <FilledInput id={id} />
-                    )
-                }
                 error={!!(touched && error)}
                 renderValue={(selected: any[]) => (
                     <div className={classes.chips}>
@@ -252,10 +252,10 @@ const SelectArrayInput: FunctionComponent<
                     </div>
                 )}
                 data-testid="selectArray"
-                variant={variant}
                 {...input}
                 value={input.value || []}
                 {...options}
+                labelWidth={labelWidth}
             >
                 {choices.map(renderMenuItem)}
             </Select>