React-admin: AutocompleteInput suggestions are shown behind the modal

[Sklico]

What you were expecting:
I use ReferenceInput with Autocomplete in modal. I expected, that when I start to type, suggestions container will show as normal.

What happened instead:
Unfortunately, suggestions container is shown behind modal. AutocompleteInput was changed in 3.x and old solution from 2.x doesn't work anymore. Is it possible to override suggestionsContainer class and change zIndex value ? It's the same problem as in version 2.x, which was discussed e.g. here - http://stackoverflow.com/questions/tagged/react-admin.

Environment

• React-admin version: 3.2.0
• React version: 16.12.0

[Sklico]

Ok, I figured out. AutocompleteInput doesn't pass classes / className to AutocompleteSuggestionsList, but it pass suggestionsContainerProps. So className could be passed like that:

<AutocompleteInput optionText="title" options={{suggestionsContainerProps: { className: classes.container }}} />

I don't know if it is the right solution or just sort of workaround, but it's working and maybe it could help to someone else.

If there is some better solution and I did it wrong, please reopen the issue.

[my-kel]

Thanks @Sklico, I was trying to figure out how to override the z-index.

I was first trying this fix, designed for React Admin 2: https://github.com/marmelab/react-admin/issues/2456#issuecomment-627686897

It didn't helped me because I'm using React Admin 3 (like you) and the AutocompleteInput API changed.

[TCM5]

This behaviour still occurs on the latest version (3.7.0)

[fzaninotto]

@TCM5 Please open a new issue with a link to a CodeSandbox reproducing the issue.

[meastp]

Ok, I figured out. AutocompleteInput doesn't pass classes / className to AutocompleteSuggestionsList, but it pass suggestionsContainerProps. So className could be passed like that:

<AutocompleteInput optionText="title" options={{suggestionsContainerProps: { className: classes.container }}} />

I don't know if it is the right solution or just sort of workaround, but it's working and maybe it could help to someone else.

If there is some better solution and I did it wrong, please reopen the issue.

@Sklico I'm struggling a bit with your workaround. Could you give a complete example?

Are you using

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
    suggestionsContainer: {
        zIndex: 2100,
    },
});

And const classes = useStyles(); inside your component?

[Sklico]

@meastp no problem, here is one for ReferenceArrayInput & AutocompleteArrayInput

import React from 'react';
import {
    SimpleForm,
    AutocompleteArrayInput,
    ReferenceArrayInput,
    SaveButton,
    Toolbar,
    Button
} from 'react-admin';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import {createForm} from 'final-form';
import {makeStyles} from '@material-ui/core/styles';
import IconCancel from '@material-ui/icons/Cancel';

const useStyles = makeStyles({
    root: {
        backgroundColor: 'transparent',
        justifyContent: 'flex-end',
        padding: 0
    },
    button: {
        marginRight: '30px'
    },
    container: {
        zIndex: 4000
    }
});

const DialogFormToolbar = props => {
    const classes = useStyles();
    return (
        <Toolbar {...props} className={classes.root}>
            <SaveButton
                className={classes.button}
            />
            <Button
                label="ra.action.cancel"
                onClick={() => props._showDialog(false)}
            >
                <IconCancel/>
            </Button>
        </Toolbar>
    )
};

export default ({ record, handleSubmit, setShowDialog, showDialog}) => {
    const classes = useStyles();
    return (
        <Dialog
            fullWidth
            open={showDialog}
            onClose={() => {
                setShowDialog(false);
            }}
            aria-label="Dialog title"
            disableEnforceFocus
        >
            <DialogTitle>Dialog title</DialogTitle>
            <DialogContent>
                <SimpleForm
                    form={createForm({onSubmit: handleSubmit})}
                    resource="block_services"
                    toolbar={<DialogFormToolbar _showDialog={setShowDialog}/>}
                    variant="standard"
                    record={record}
                    save={handleSubmit}
                >
                    <ReferenceArrayInput 
                        label="Services" 
                        source="services"
                        reference="services" 
                        perPage={5}
                        filterToQuery={
                            searchText => ({ 
                                name: searchText
                            })
                        } 
                        sort={{
                            field: 'id',
                            order: 'ASC'
                        }}
                        fullWidth
                    >
                        <AutocompleteArrayInput 
                            optionText="name"
                            options={{
                                suggestionsContainerProps: {
                                    className: classes.container
                                }
                            }}
                        />
                    </ReferenceArrayInput>
                </SimpleForm>
            </DialogContent>
        </Dialog>
    )
};

[rodri042]

As a workaround, just use:

          <AutocompleteInput
            options={{
              suggestionsContainerProps: {
                style: {
                  zIndex: 99999
                }
              }
            }}
          />

[meastp]

thank you, and sorry for the late reply. I just noticed that react-admin v3.9.4 was released, and it does close #5393 - so I guess this is finally fixed? :)

[fzaninotto]

It's not fixed automatically, because we can't fix it in react-admin. But we've documented the fix in https://marmelab.com/react-admin/Inputs.html#css-api