AutocompleteInput suggestions list location in filters

[despatates]

General description
In filters of a List module, if a ReferenceInput with AutocompleteInput is moved after adding/removing another filter, the suggestions list stays at the old location.

What you were expecting:

When I add a new filter, I want the suggestions list of the previous AutocompleteInput to be moved to the right place.

What happened instead:

When a new filter is added/removed to a List, the AutocompleteInput is moved to the right place, but the suggestions list opens at the old location of the filter.

Steps to reproduce:

When adding a filter:

When removing a filter:

Related code:

const OrderFilters = props => (
  <Filter {...props}>
    <TextInput source="company" />
    <ReferenceInput
      source="customer_id"
      reference="customer"
      allowEmpty
    >
      <AutocompleteInput optionText="name" />
    </ReferenceInput>
    <ReferenceInput
      source="carrier_id"
      reference="carrier"
      allowEmpty
    >
      <AutocompleteInput optionText="name" />
    </ReferenceInput>
  </Filter>
);

const OrderList = props => (
<List {...props} filters={<OrderFilters />}>
 [...]
</List>

Other information:

No error stacktrace.

Environment

• React-admin version: 2.2.3
• Last version that did not exhibit the issue (if applicable): unknown
• React version: 16.4.13
• Browser: Chrome 68.0.3440.106

[fzaninotto]

wow, such a weird bug! Thanks for reporting it.

[vascofg]

Could this be related to #2256?

[fzaninotto]

possibly

[despatates]

I just saw the new component AutocompleteArrayInput introduced with v2.3.0 suffers the same effect.

(See when adding tags Rock and Crossfit)

[selenyillar]

Not only in filters; if the suggestion list opens upward, when you search something, the list sticks to the top as it narrows.

[tiagoschenkel]

I had the same error here and found a possible solution.

The problem happens because the Popper component used to render the choices is a stateless component.

I noticed that when the original input element moves, React is keeping the old Popper without forcing it to redraw.

My solution is to create a new object that mimics the original input element. Doing this, we force the component to be redrawn, since the anchor element will always be new.

const anchorEl = !this.inputEl
            ? null
            : {
                  getBoundingClientRect: () =>
                      this.inputEl.getBoundingClientRect(),
              };

Then I'm using this anchorEl in the Popper component.

Here is my implementation, let me know if is fine for a merge request:
tiagoschenkel@3e58c94

[tiagoschenkel]

I noticed that I was forcing the Popper element to redraw on every call to the renderSuggestionsContainer.

So now I'm keeping a reference to the old position and only forcing the redraw when the inputEl moves to a new location:
tiagoschenkel@33fafcf

I still don't know if this is the proper way to solve this issue, maybe we can store the inputEl and anchorEl elements in the state of the component.

My solution is based on this example from Material-UI docs:
https://v1-5-0.material-ui.com/utils/popper/#faked-reference-object

[selenyillar]

Can you please also add this solution on AutocompleteInput?
With this commit, now it seems only the AutocompleteArrayInput has fixed.

[tiagoschenkel]

@selenyillar, #2928 solves the problem also for AutocompleteInput.