fix: dragging floating ui components (#8230)

**Related Issue:** #8214 #7979 ## Summary - Update some component `open` handlers to call reposition before open and after open - Previously, they were just calling when open was set to true. - Update `floating-ui` utility - Handle device pixel ratio: https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning - Only set `top`, `left`, and `transform` when the component is open. - This makes it so that the positioned container is never going to "fly in" from anywhere. - Update sortable styles to hide any overflow on dragged elements.
Esri · Nov 21, 2023 · 5a81f6c · 5a81f6c
1 parent d615b39
commit 5a81f6c
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 35 deletions.
diff --git a/packages/calcite-components/src/assets/styles/_sortable.scss b/packages/calcite-components/src/assets/styles/_sortable.scss
@@ -1,4 +1,9 @@
 @mixin sortable-helper-classes() {
+  .calcite-sortable--ghost,
+  .calcite-sortable--drag {
+    overflow: hidden;
+  }
+
   .calcite-sortable--ghost::before {
     content: "";
     @apply box-border

diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -1211,7 +1211,7 @@ describe("calcite-dropdown", () => {
         filterInput.value = "numbers";
       });
 
-      expect(dropdownContentHeight.height).toBe("72px");
+      expect(dropdownContentHeight.height).toBe("88px");
     });
 
     describe("owns a floating-ui", () => {

diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -77,11 +77,8 @@ export class Dropdown
   @Prop({ reflect: true, mutable: true }) open = false;
 
   @Watch("open")
-  openHandler(value: boolean): void {
+  openHandler(): void {
     if (!this.disabled) {
-      if (value) {
-        this.reposition(true);
-      }
       onToggleOpenCloseComponent(this);
       return;
     }
@@ -207,7 +204,7 @@ export class Dropdown
     this.setFilteredPlacements();
     this.reposition(true);
     if (this.open) {
-      this.openHandler(this.open);
+      this.openHandler();
       onToggleOpenCloseComponent(this);
     }
     connectInteractive(this);
@@ -546,6 +543,7 @@ export class Dropdown
   };
 
   onBeforeOpen(): void {
+    this.reposition(true);
     this.calciteDropdownBeforeOpen.emit();
   }
 
@@ -559,6 +557,7 @@ export class Dropdown
 
   onClose(): void {
     this.calciteDropdownClose.emit();
+    this.reposition(true);
   }
 
   setReferenceEl = (el: HTMLDivElement): 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
@@ -258,17 +258,13 @@ export class InputDatePicker
   @Prop({ mutable: true, reflect: true }) open = false;
 
   @Watch("open")
-  openHandler(value: boolean): void {
+  openHandler(): void {
     onToggleOpenCloseComponent(this);
 
     if (this.disabled || this.readOnly) {
       this.open = false;
       return;
     }
-
-    if (value) {
-      this.reposition(true);
-    }
   }
 
   /**
@@ -441,7 +437,7 @@ export class InputDatePicker
     connectLocalized(this);
 
     const { open } = this;
-    open && this.openHandler(open);
+    open && this.openHandler();
     if (Array.isArray(this.value)) {
       this.valueAsDate = getValueAsDateRange(this.value);
     } else if (this.value) {
@@ -766,6 +762,7 @@ export class InputDatePicker
   }
 
   onBeforeOpen(): void {
+    this.reposition(true);
     this.calciteInputDatePickerBeforeOpen.emit();
   }
 
@@ -791,6 +788,7 @@ export class InputDatePicker
     this.restoreInputFocus();
     this.focusOnOpen = false;
     this.datePickerEl.reset();
+    this.reposition(true);
   }
 
   setStartInput = (el: HTMLCalciteInputElement): void => {

diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx
@@ -192,13 +192,9 @@ export class Popover
   @Prop({ reflect: true, mutable: true }) open = false;
 
   @Watch("open")
-  openHandler(value: boolean): void {
+  openHandler(): void {
     onToggleOpenCloseComponent(this);
 
-    if (value) {
-      this.reposition(true);
-    }
-
     this.setExpandedAttr();
   }
 
@@ -502,6 +498,7 @@ export class Popover
   };
 
   onBeforeOpen(): void {
+    this.reposition(true);
     this.calcitePopoverBeforeOpen.emit();
   }
 
@@ -517,6 +514,7 @@ export class Popover
   onClose(): void {
     this.calcitePopoverClose.emit();
     deactivateFocusTrap(this);
+    this.reposition(true);
   }
 
   storeArrowEl = (el: SVGElement): void => {

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx
@@ -87,11 +87,8 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
   @Prop({ reflect: true }) open = false;
 
   @Watch("open")
-  openHandler(value: boolean): void {
+  openHandler(): void {
     onToggleOpenCloseComponent(this);
-    if (value) {
-      this.reposition(true);
-    }
   }
 
   /**
@@ -251,6 +248,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
   // --------------------------------------------------------------------------
 
   onBeforeOpen(): void {
+    this.reposition(true);
     this.calciteTooltipBeforeOpen.emit();
   }
 
@@ -264,6 +262,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
 
   onClose(): void {
     this.calciteTooltipClose.emit();
+    this.reposition(true);
   }
 
   private setTransitionEl = (el): void => {

diff --git a/packages/calcite-components/src/utils/floating-ui.spec.ts b/packages/calcite-components/src/utils/floating-ui.spec.ts
@@ -80,16 +80,6 @@ describe("repositioning", () => {
     expect(floatingEl.style.left).toBe("0");
   }
 
-  it("repositions for unopened components", async () => {
-    await reposition(fakeFloatingUiComponent, positionOptions);
-    assertOpenPositioning(floatingEl);
-
-    fakeFloatingUiComponent.open = true;
-
-    await reposition(fakeFloatingUiComponent, positionOptions);
-    assertOpenPositioning(floatingEl);
-  });
-
   it("repositions immediately by default", async () => {
     assertPreOpenPositioning(floatingEl);
 

diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts
@@ -27,6 +27,11 @@ import { offsetParent } from "composed-offset-position";
   }
 })();
 
+function roundByDPR(value: number): number {
+  const dpr = window.devicePixelRatio || 1;
+  return Math.round(value * dpr) / dpr;
+}
+
 /**
  * Positions the floating element relative to the reference element.
  *
@@ -145,15 +150,15 @@ export const positionFloatingUI =
 
     floatingEl.setAttribute(placementDataAttribute, effectivePlacement);
 
-    const transform = `translate(${Math.round(x)}px,${Math.round(y)}px)`;
+    const { open } = component;
 
     Object.assign(floatingEl.style, {
       visibility,
       pointerEvents,
       position,
-      top: "0",
-      left: "0",
-      transform,
+      transform: open ? `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)` : "",
+      left: open ? "0" : "",
+      top: open ? "0" : "",
     });
   };