autocompleteinput renders suggestioncontainer behind dialog

What you were expecting: To see the suggestion container

What happened instead: I see the suggestion container behind the dialog

Steps to reproduce:

               <Dialog
                    open={this.state.open}
                    onClose={this.handleClose}
                    aria-labelledby="form-dialog-title"
                >
                    <DialogTitle id="form-dialog-title">Kopieer configuratie</DialogTitle>
                    <DialogContent>
                    <ReferenceInput label="Project" resource="projecten" source="lotSelectionProjectId" reference="projecten" filterToQuery={searchText => ({ naam: searchText })}>
                        <AutocompleteInput optionText="naam" optionValue="id" inputValueMatcher={() => null} />
                    </ReferenceInput>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.handleClose} color="primary">
                            Cancel
                        </Button>
                        <Button onClick={this.handleClose} color="primary">
                            Kopieer
                        </Button>
                    </DialogActions>
                </Dialog>

Other information: SelectInput renders correct

Environment

• React-admin version: 2.4.0
• React version: 16.5.2
• Browser: chrome

[meastp]

This is still broken in 3.7.0 - I can press the down arrow and Return when I know there is a match, but the suggestions are never visible (I’m using a dialog).

[sgonzaloc]

Well I share a solution for react-admin version 2.8.5. I think that this will help to fix this issue quickly without searching more examples around the web

Here the styles that you need to add, usually with withStyles. You can use another zIndex value but should be bigger than the dialog zIndex value. The default value of this component was 2.

const styles = {
  suggestionsContainerOpen: {
    zIndex: 2100,
  },
};

Using withStyles to add the styles

withStyles(styles)(yourCustomClassName)

And here in the render function, I give you an example about how you should do to override the className

<AutocompleteArrayInput
  classes={{
    suggestionsContainerOpen: classes.suggestionsContainerOpen,
  }}
  choices={choicesList}
/>

@TomJannes Could you please write your solution?