Skip to content

Commit

Permalink
Merge pull request #6065 from marmelab/Fix-autocompleteInput-in-dialog
Browse files Browse the repository at this point in the history
Fix <AutocompleteInput> and <AutocompletearrayInput> options appear behind dialog
  • Loading branch information
djhi committed Mar 19, 2021
2 parents 9531bad + a182091 commit df89dbc
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 78 deletions.
40 changes: 0 additions & 40 deletions docs/Inputs.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
68 changes: 33 additions & 35 deletions packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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' }
);

Expand Down
8 changes: 5 additions & 3 deletions packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -567,7 +567,7 @@ const handleMouseDownClearButton = event => {
};

const useStyles = makeStyles(
{
theme => ({
container: {
flexGrow: 1,
position: 'relative',
Expand All @@ -591,8 +591,10 @@ const useStyles = makeStyles(
inputAdornedEnd: {
paddingRight: 0,
},
suggestionsContainer: {},
},
suggestionsContainer: {
zIndex: theme.zIndex.modal,
},
}),
{ name: 'RaAutocompleteInput' }
);

Expand Down

0 comments on commit df89dbc

Please sign in to comment.