React-admin: autocompleteinput renders suggestioncontainer behind dialog

[TomJannes]

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

[fzaninotto]

Hi TomJannes, and thanks for the bug report.

Indeed, material-ui's Dialog uses a z-index of theme.zIndex.modal, which is 1300 by default. In AutocompleteInput, we've used a z-index of 2, so it appears under the dialog (both use an absolute positioning).

However, we can't increase the z-index by default because it would make the suggestions appear on top of any dialog, even dialogs that should be on top of everything else.

So we won't fix this issue, or it will cause new issues. You can always override the default style by decorating AutocompleteInput with a withStyles(customStyles) in this case. I hope it's not too much a burden!

[TomJannes]

No problem :-)

[sebitoelcheater]

@TomJannes Could you please write your solution?

[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?

[sebitoelcheater]

This seems to be broken in version 3.0

[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).