From 5d66f16ab5e17bbcdcea9c7a506b80c02ec064b7 Mon Sep 17 00:00:00 2001
From: Adrian Schmidt <adrian.schmidt@lime.tech>
Date: Fri, 8 Nov 2024 11:32:59 +0100
Subject: [PATCH] fix(input-field): resize completions dropdown when viewport
 is resized

fix: Lundalogik/crm-feature#4408
---
 src/components/input-field/input-field.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/input-field/input-field.tsx b/src/components/input-field/input-field.tsx
index 71f9e49380..276d37c43f 100644
--- a/src/components/input-field/input-field.tsx
+++ b/src/components/input-field/input-field.tsx
@@ -37,7 +37,8 @@ interface LinkProperties {
     target?: string;
 }
 
-const DEBOUNCE_TIMEOUT = 300;
+const CHANGE_EVENT_DEBOUNCE_TIMEOUT = 300;
+const RESIZE_HANDLER_DEBOUNCE_TIMEOUT = 100;
 
 /**
  * @exampleComponent limel-example-input-field-text
@@ -280,6 +281,7 @@ export class InputField {
             this.mdcTextField.destroy();
         }
 
+        this.restyleCompletionsDropDown.cancel();
         window.removeEventListener('resize', this.layout);
         this.limelInputField.removeEventListener('focus', this.setFocus);
     }
@@ -492,8 +494,17 @@ export class InputField {
 
     private layout = () => {
         this.mdcTextField?.layout();
+        this.restyleCompletionsDropDown();
     };
 
+    private restyleCompletionsDropDown = debounce(() => {
+        const stateOfShowCompletions = this.showCompletions;
+        this.showCompletions = false;
+        requestAnimationFrame(() => {
+            this.showCompletions = stateOfShowCompletions;
+        });
+    }, RESIZE_HANDLER_DEBOUNCE_TIMEOUT);
+
     private getAdditionalProps = () => {
         const props: any = {};
 
@@ -974,7 +985,7 @@ export class InputField {
     private changeEmitter = debounce((value: string) => {
         this.change.emit(value);
         this.changeWaiting = false;
-    }, DEBOUNCE_TIMEOUT);
+    }, CHANGE_EVENT_DEBOUNCE_TIMEOUT);
 
     private handleChange = (event: Event) => {
         event.stopPropagation();