Merge pull request #2860 from tiagoschenkel/issue-2259

Fix position of choices container when input element moves to another location
marmelab · Feb 21, 2019 · be20c55 · be20c55
2 parents 1505df4 + f0a7e91
commit be20c55
Showing 1 changed file with 27 additions and 1 deletion.
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js
@@ -110,6 +110,7 @@ export class AutocompleteArrayInput extends React.Component {
     };
 
     inputEl = null;
+    anchorEl = null;
 
     componentWillMount() {
         this.setState({
@@ -236,6 +237,7 @@ export class AutocompleteArrayInput extends React.Component {
         // but Autosuggest also needs this reference (it provides the ref prop)
         const storeInputRef = input => {
             this.inputEl = input;
+            this.updateAnchorEl();
             ref(input);
         };
 
@@ -329,17 +331,41 @@ export class AutocompleteArrayInput extends React.Component {
         input.onChange(this.state.inputValue.filter(value => value !== chip));
     };
 
+    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 = options => {
         const {
             containerProps: { className, ...containerProps },
             children,
         } = options;
 
+        // Force the Popper component to reposition the popup only when this.inputEl is moved to another location
+        this.updateAnchorEl();
+
         return (
             <Popper
                 className={className}
                 open
-                anchorEl={this.inputEl}
+                anchorEl={this.anchorEl}
                 placement="bottom-start"
             >
                 <Paper square {...containerProps}>