Merge pull request #2928 from tiagoschenkel/issue-2259

Fix position of suggestions container on AutocompleteInput
marmelab · Feb 25, 2019 · cbe326d · cbe326d
2 parents 4fc6864 + 6e9b711
commit cbe326d
Showing 1 changed file with 27 additions and 1 deletion.
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.js b/packages/ra-ui-materialui/src/input/AutocompleteInput.js
@@ -103,6 +103,7 @@ export class AutocompleteInput extends React.Component {
     };
 
     inputEl = null;
+    anchorEl = null;
 
     componentWillMount() {
         const selectedItem = this.getSelectedItem(
@@ -251,6 +252,7 @@ export class AutocompleteInput extends React.Component {
         // but Autosuggest also needs this reference (it provides the ref prop)
         const storeInputRef = input => {
             this.inputEl = input;
+            this.updateAnchorEl();
             ref(input);
         };
 
@@ -285,18 +287,42 @@ export class AutocompleteInput extends React.Component {
         );
     };
 
+    updateAnchorEl() {
+        if (!this.inputEl) {
+            return;
+        }
+
+        const inputPosition = this.inputEl.getBoundingClientRect();
+
+        if (!this.anchorEl) {
+            this.anchorEl = { getBoundingClientRect: () => inputPosition };
+        } else {
+            const anchorPosition = this.anchorEl.getBoundingClientRect();
+
+            if (
+                anchorPosition.x !== inputPosition.x ||
+                anchorPosition.y !== inputPosition.y
+            ) {
+                this.anchorEl = { getBoundingClientRect: () => inputPosition };
+            }
+        }
+    }
+
     renderSuggestionsContainer = autosuggestOptions => {
         const {
             containerProps: { className, ...containerProps },
             children,
         } = autosuggestOptions;
         const { classes = {}, options } = this.props;
 
+        // Force the Popper component to reposition the popup only when this.inputEl is moved to another location
+        this.updateAnchorEl();
+
         return (
             <Popper
                 className={className}
                 open={Boolean(children)}
-                anchorEl={this.inputEl}
+                anchorEl={this.anchorEl}
                 placement="bottom-start"
                 {...options.suggestionsContainerProps}
             >