Autocomplete : Popover (dropdown) does not stay underneath

[AkselsLedins]

Hello !

What you were expecting:
That the dropdown stays underneath and won't cover the input.

What happened instead:
The dropdown is covering the input.

Steps to reproduce:
Works in demo app:
https://marmelab.com/react-admin-demo/#/reviews?filter=%7B%7D&order=DESC&page=1&perPage=25&sort=date

• Add filter -> Customer
• Click on customer reference input (filter)
• Scroll down a little

you can click outside and click again the input, the dropdown will still be on top on the input, preventing you from typing anything.

It's really annoying 😞

[FACOLOMBANI]

I am having the same problem when using AutocompleteArrayInput and AutocompleteInput below a custom component that loads after both inputs.

[fzaninotto]

Bug confirmed.

[FACOLOMBANI]

I fixed my issue by adding a the prop 'disablePortal={true}' to the Popper component in the renderSuggenstionsContainer.

[afilp]

@FACOLOMBANI Was that change inside the react-admin code? Or in your project's code? Thanks.

[FACOLOMBANI]

I did this inside react-admin code. I forked the component for customization because i needed to group choices, render groups and secondary information, so that was the fix to the Popper in Both AutocompleteArrayInput and AutocometeInput. In this page you will find the description for disablePortal prop https://material-ui.com/api/popper/. Hope it helps.

[afilp]

@FACOLOMBANI Thanks! Do you believe you could make a PR allowing for a prop to make this behavior optional without the need to change the react-admin core itself?

@fzaninotto I also consider the wrong positioning of the portal as a bug (not sure if they fixed this in later MUI versions though).

Look here:

Then, after filtering the results through typing:

It seems to me that the flipped popper does not recalculate its distance from the trigger element every time the suggestions get reduced.

[FACOLOMBANI]

@aflip for your last bug, i looked at my code again and saw i also added a modifier in the Popper component, look at the modifiers prop below

Here is the description https://popper.js.org/popper-documentation.html#modifiers..keepTogether

<Popper
                className={className}
                open
                anchorEl={this.inputEl}
                disablePortal={true}
                placement="bottom-start"
                modifiers={{
                    keepTogether: {
                        enabled: true
                    }
                }}
            >
                <Paper square className={classes.suggestionsPaper} {...containerProps}>
                    {children}
                </Paper>
            </Popper>

I could create a PR for this.

[afilp]

Wait, I had already created one, I am pusing now! :-)

Thanks a lot!

[afilp]

@FACOLOMBANI I tried the keepTogether but it did not seem to work (i.e. bring the filtered popper back to its trigger element)

What worked was this though (somehow differently):

          modifiers={{
            flip: {
              enabled: false,
            },
            preventOverflow: {
              enabled: true,
              boundariesElement: 'scrollParent',
            },
          }}

The above always shows the popper below the trigger element.

I would prefer your solution but in my case it did not work, not sure why.

[FACOLOMBANI]

@afilp The first work around for me was the one you just sent, but i needed the flip enabled to true, and i didn't needed the preventOverflow, and using keepTogether worked well with the flip.

[afilp]

@FACOLOMBANI Thanks! Not sure why I did not see it working in my case. @djhi replied to the PR and he will make a better, more generic PR.

[fzaninotto]

Fixed by #2678