Skip to content

Commit

Permalink
fix(combobox, dropdown, input-date-picker, popover, tooltip): fix pos…
Browse files Browse the repository at this point in the history
…itioning 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.
driskull authored Nov 29, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent a094d8d commit 2b2506d
Showing 5 changed files with 5 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -439,6 +439,7 @@ export class Combobox
this.openHandler();
onToggleOpenCloseComponent(this);
}
connectFloatingUI(this, this.referenceEl, this.floatingEl);
}

async componentWillLoad(): Promise<void> {
Original file line number Diff line number Diff line change
@@ -209,6 +209,7 @@ export class Dropdown
}
connectInteractive(this);
this.updateItems();
connectFloatingUI(this, this.referenceEl, this.floatingEl);
}

componentWillLoad(): void {
Original file line number Diff line number Diff line change
@@ -475,6 +475,7 @@ export class InputDatePicker
if (this.open) {
onToggleOpenCloseComponent(this);
}
connectFloatingUI(this, this.referenceEl, this.floatingEl);
}

async componentWillLoad(): Promise<void> {
Original file line number Diff line number Diff line change
@@ -300,6 +300,7 @@ export class Popover
if (this.open) {
onToggleOpenCloseComponent(this);
}
connectFloatingUI(this, this.effectiveReferenceElement, this.el);
}

async componentWillLoad(): Promise<void> {
Original file line number Diff line number Diff line change
@@ -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> {

0 comments on commit 2b2506d

Please sign in to comment.