diff --git a/packages/calcite-components/src/assets/styles/_sortable.scss b/packages/calcite-components/src/assets/styles/_sortable.scss index 236b64906f7..b701a80fb39 100644 --- 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 index 36315b234e6..70df138aa16 100644 --- 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 index 92044364782..a792548c370 100644 --- 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 index e01b808e304..6fc11f4acfb 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 @@ -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 index ba5623bc55f..60a1ed0b82f 100644 --- 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 index 552ae61ec99..479a9ba4e4b 100644 --- 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 index e3174e94c72..0ece79154a2 100644 --- 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 index c8e371941b6..6dea0ab9549 100644 --- 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" : "", }); };