React-admin: AutocompleteInput suggestion list location

[selenyillar]

AutocompleteInput suggestion list location still have these bugs after installing the latest release. (2.7.3)

If the suggestion list opens upward, when you search something, the list sticks to the top as it narrows.
Also the list panel stays fixed as you scroll down/up the page.

Environment

• React-admin version: 2.7.3
• React version: 16.8.3
• Browser: Chrome Version 72.0.3626.121

[Kmaschta]

What is your browser version please?

[selenyillar]

Updated my comment.

[marquesgabriel]

Hello, I'm facing this same situation. The AutocompleteInput's suggestions inside an ArrayInput floats away from the input. I'll insert a gif as an example:

---

And here is the piece of code

<ArrayInput label="Localizações e Diagnósticos" source="Pathologies">
      <SimpleFormIterator>
        <ReferenceInput label="Localização da Lesão" source="WoundLocaleId" reference="lesoes" filterToQuery={val => ({ localization: val })}>
          <AutocompleteInput inputValueMatcher={() => null} optionText="localization"/>
        </ReferenceInput>
        <ReferenceInput label="Diagnóstico" source="diagnoseId" reference="diagnosticos" filterToQuery={val => ({ description: val })}>
          <AutocompleteInput inputValueMatcher={() => null} optionText="description"/>
        </ReferenceInput>
      </SimpleFormIterator>
</ArrayInput>

---

Environment

• React-admin version: 2.8.2
• React version: 16.8.4
• Browser:
  
  
  
  • Chrome Version 73.0.3683.86
  
  
  • Firefox Version 68.0a1
  
  

PS: I ensured the packages were fully updated. I cleaned the cache and removed the node_modules folder and then installed all of them

[FACOLOMBANI]

The problem comes from de Popper component inside of the AutocompleteInput. Try adding to the AutocompleteInput the options below:

<AutocompleteInput inputValueMatcher={() => null} optionText="localization" options={{ suggestionsContainerProps: { disablePortal: true, modifiers: { keepTogether: { enabled: true } } } }}/>

[marquesgabriel]

The disablePortal option positioned it wrong

:cry:
PS: tried in other views and got the same result

[FACOLOMBANI]

Did you add the modifiers as well?

[marquesgabriel]

Yes. Tried just like you sent, without the disablePortal option and some others also. keepTogether must be true to work properly

[FACOLOMBANI]

Can you try those config in an AutocompleteInput outside the ArrayInput and SimpleformIterator iterator to see if its a compatibility problem with the ArrayInput and SimpleformIterator? or try this modifier https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.

[marquesgabriel]

I tried the AutoCompleteInput on a filter component also. Same result. I think the problem is related to this issue that is already fixed - https://github.com/marmelab/react-admin/issues/2259
I cloned React-Admin repo and I'll make some experiments to see if i can find the origin of this behaviour

[FACOLOMBANI]

I did the same because i had the same issue, look a this issue, the second comment https://github.com/marmelab/react-admin/issues/2370

The problem comes from the popper rendering outside its bouderies. In my case the wysiwyg i had, rendered after the autocomplete input, so the popper element was taking the initial position of the autocomplete input to render. So i tested several modifiers and the solution i sent to you was the correct for my case.

In your case, it has to be another condition, but it still comes from the popper rendering outside the bouderies.

[marquesgabriel]

Thanks for all the help, i'll try some other things and if i succeed fixing the problem i post it here

[komik966]

[Kmaschta]

Related to #3031

[fzaninotto]

Fixed by #3683