Fix AutocompleteInput options appear behind dialog

Material-ui's Autocomplete uses the `theme.zIndex.modal` value for the z-index of their suggestion list (see https://github.com/mui-org/material-ui/blob/f23207bf2312eba2686522f904d72aea7d3c0a88/packages/material-ui/src/Autocomplete/Autocomplete.js#L276), so we should do the same. Refs #2456, #4537, #5181, #5375
marmelab · Mar 19, 2021 · a182091 · a182091
1 parent 622fcc0
commit a182091
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 78 deletions.
diff --git a/docs/Inputs.md b/docs/Inputs.md
@@ -544,26 +544,6 @@ import { AutocompleteInput } from 'react-admin';
 | `container`            | Applied to the root element          |
 | `suggestionsContainer` | Applied to the suggestions container |
 
-The suggestions container has a `z-index` of 2. When using `<AutocompleteInput>` in a `<Dialog>`, this will cause suggestions to appear beneath the Dialog. The solution is to override the `suggestionsContainer` class name, as follows:
-
-```diff
-import { AutocompleteInput } from 'react-admin';
--import { Dialog } from '@material-ui/core';
-+import { Dialog, withStyles } from '@material-ui/core';
-
-+const AutocompleteInputInDialog = withStyles({
-+    suggestionsContainer: { zIndex: 2000 },
-+})(AutocompleteInput);
-
-const EditForm = () => (
-    <Dialog open>
-        ...
--       <AutocompleteInput source="foo" choices={[...]}>
-+       <AutocompleteInputInDialog source="foo" choices={[...]}>
-    </Dialog>
-)
-```
-
 To override the style of all instances of `<AutocompleteInput>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaAutocompleteInput` key.
 
 #### Usage
@@ -1060,26 +1040,6 @@ import { AutocompleteArrayInput } from 'react-admin';
 | `inputRootFilled`       | Styles pass as the `root` class of the underlying Material UI's `TextField` component input when `variant` prop is `filled` |
 | `inputInput`            | Styles pass as the `input` class of the underlying Material UI's `TextField` component input                                |
 
-The suggestions container has a `z-index` of 2. When using `<AutocompleteArrayInput>` in a `<Dialog>`, this will cause suggestions to appear beneath the Dialog. The solution is to override the `suggestionsContainer` class name, as follows:
-
-```diff
-import { AutocompleteArrayInput } from 'react-admin';
--import { Dialog } from '@material-ui/core';
-+import { Dialog, withStyles } from '@material-ui/core';
-
-+const AutocompleteArrayInputInDialog = withStyles({
-+    suggestionsContainer: { zIndex: 2000 },
-+})(AutocompleteArrayInput);
-
-const EditForm = () => (
-    <Dialog open>
-        ...
--       <AutocompleteArrayInput source="foo" choices={[...]}>
-+       <AutocompleteArrayInputInDialog source="foo" choices={[...]}>
-    </Dialog>
-)
-```
-
 To override the style of all instances of `<AutocompleteArrayInput>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaAutocompleteArrayInput` key.
 
 #### Usage

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx
@@ -495,42 +495,40 @@ const AutocompleteArrayInput = (props: AutocompleteArrayInputProps) => {
 const emptyArray = [];
 
 const useStyles = makeStyles(
-    theme => {
-        const chipBackgroundColor =
-            theme.palette.type === 'light'
-                ? 'rgba(0, 0, 0, 0.09)'
-                : 'rgba(255, 255, 255, 0.09)';
-
-        return {
-            container: {
-                flexGrow: 1,
-                position: 'relative',
-            },
-            suggestionsContainer: {},
-            chip: {
-                margin: theme.spacing(0.5, 0.5, 0.5, 0),
-            },
-            chipContainerFilled: {
-                margin: '27px 12px 10px 0',
-            },
-            chipContainerOutlined: {
-                margin: '12px 12px 10px 0',
-            },
-            inputRoot: {
-                flexWrap: 'wrap',
-            },
-            inputRootFilled: {
-                flexWrap: 'wrap',
-                '& $chip': {
-                    backgroundColor: chipBackgroundColor,
-                },
-            },
-            inputInput: {
-                width: 'auto',
-                flexGrow: 1,
+    theme => ({
+        container: {
+            flexGrow: 1,
+            position: 'relative',
+        },
+        suggestionsContainer: {
+            zIndex: theme.zIndex.modal,
+        },
+        chip: {
+            margin: theme.spacing(0.5, 0.5, 0.5, 0),
+        },
+        chipContainerFilled: {
+            margin: '27px 12px 10px 0',
+        },
+        chipContainerOutlined: {
+            margin: '12px 12px 10px 0',
+        },
+        inputRoot: {
+            flexWrap: 'wrap',
+        },
+        inputRootFilled: {
+            flexWrap: 'wrap',
+            '& $chip': {
+                backgroundColor:
+                    theme.palette.type === 'light'
+                        ? 'rgba(0, 0, 0, 0.09)'
+                        : 'rgba(255, 255, 255, 0.09)',
             },
-        };
-    },
+        },
+        inputInput: {
+            width: 'auto',
+            flexGrow: 1,
+        },
+    }),
     { name: 'RaAutocompleteArrayInput' }
 );
 

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -567,7 +567,7 @@ const handleMouseDownClearButton = event => {
 };
 
 const useStyles = makeStyles(
-    {
+    theme => ({
         container: {
             flexGrow: 1,
             position: 'relative',
@@ -591,8 +591,10 @@ const useStyles = makeStyles(
         inputAdornedEnd: {
             paddingRight: 0,
         },
-        suggestionsContainer: {},
-    },
+        suggestionsContainer: {
+            zIndex: theme.zIndex.modal,
+        },
+    }),
     { name: 'RaAutocompleteInput' }
 );