From 2b2506d07978b2fb66a63c1fed57c3f36c0d2996 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 29 Nov 2023 12:05:16 -0800
Subject: [PATCH] fix(combobox, dropdown, input-date-picker, popover, tooltip):
 fix positioning of component when component is moved (#8296)

**Related Issue:** #6121

## Summary

- When a component is moved (via drag and drop or whatever), we need to
reconnect floating UI (connectFloatingUI).
- This is needed because it sets up autoUpdating of the reference
element so that the reference element is tracked and positioned properly
- Currently, when an a component is moved, this tracking is lost because
we were only calling `connectFloatingUI` when the reference element and
floating element were created.
- This PR makes sure that we reestablish the floating UI autoUpdate when
the component itself is moved.
---
 packages/calcite-components/src/components/combobox/combobox.tsx | 1 +
 packages/calcite-components/src/components/dropdown/dropdown.tsx | 1 +
 .../src/components/input-date-picker/input-date-picker.tsx       | 1 +
 packages/calcite-components/src/components/popover/popover.tsx   | 1 +
 packages/calcite-components/src/components/tooltip/tooltip.tsx   | 1 +
 5 files changed, 5 insertions(+)

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index 637a19aa443..5ab414a4814 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -439,6 +439,7 @@ export class Combobox
       this.openHandler();
       onToggleOpenCloseComponent(this);
     }
+    connectFloatingUI(this, this.referenceEl, this.floatingEl);
   }
 
   async componentWillLoad(): Promise<void> {
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index a792548c370..ad0e3c18d87 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -209,6 +209,7 @@ export class Dropdown
     }
     connectInteractive(this);
     this.updateItems();
+    connectFloatingUI(this, this.referenceEl, this.floatingEl);
   }
 
   componentWillLoad(): void {
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index 6fc11f4acfb..5d591424527 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -475,6 +475,7 @@ export class InputDatePicker
     if (this.open) {
       onToggleOpenCloseComponent(this);
     }
+    connectFloatingUI(this, this.referenceEl, this.floatingEl);
   }
 
   async componentWillLoad(): Promise<void> {
diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx
index 60a1ed0b82f..a00109a3d9c 100644
--- a/packages/calcite-components/src/components/popover/popover.tsx
+++ b/packages/calcite-components/src/components/popover/popover.tsx
@@ -300,6 +300,7 @@ export class Popover
     if (this.open) {
       onToggleOpenCloseComponent(this);
     }
+    connectFloatingUI(this, this.effectiveReferenceElement, this.el);
   }
 
   async componentWillLoad(): Promise<void> {
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx
index 479a9ba4e4b..25f4b63dcd3 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.tsx
+++ b/packages/calcite-components/src/components/tooltip/tooltip.tsx
@@ -163,6 +163,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
     if (this.open) {
       onToggleOpenCloseComponent(this);
     }
+    connectFloatingUI(this, this.effectiveReferenceElement, this.el);
   }
 
   async componentWillLoad(): Promise<void> {