fix!: floating-ui elements no longer take up space when closed

packages/calcite-components/src/assets/styles/_floating-ui.scss

@@ -34,7 +34,7 @@ $floating-ui-transition-offset: 5px;
 
 @mixin floating-ui-anim-active {
   opacity: 1;
-  inset-block: 0;
+  inset-block-start: 0;
   left: 0;
 }
 

packages/calcite-components/src/components/dropdown/dropdown.e2e.ts

@@ -1151,7 +1151,7 @@ describe("calcite-dropdown", () => {
     const page = await newE2EPage({
       html: html`<calcite-panel heading="Issue #3048">
         <calcite-pick-list filter-enabled>
-          <calcite-dropdown slot="menu-actions" placement="bottom-end" type="click">
+          <calcite-dropdown open slot="menu-actions" placement="bottom-end" type="click">
             <calcite-action slot="trigger" title="Sort" icon="sort-descending"> </calcite-action>
             <calcite-dropdown-group selection-mode="single">
               <calcite-dropdown-item>Display name</calcite-dropdown-item>

packages/calcite-components/src/components/popover/popover.stories.ts

@@ -208,3 +208,9 @@ export const transparentBG_TestOnly = (): string => html`
     </calcite-popover>
   </div>
 `;
+
+export const closedShouldNotCauseScrollbars = (): string =>
+  html`<calcite-popover reference-element="button">
+      <div style="width:10000px; height:10000px;">Popover</div>
+    </calcite-popover>
+    <calcite-button id="button">Button</calcite-button>`;

packages/calcite-components/src/utils/floating-ui.spec.ts

@@ -78,21 +78,27 @@ describe("repositioning", () => {
     connectFloatingUI(fakeFloatingUiComponent, referenceEl, floatingEl);
   });
 
+  function assertClosedPositioning(floatingEl: HTMLElement): void {
+    expect(floatingEl.style.display).toBe("none");
+  }
+
   function assertPreOpenPositioning(floatingEl: HTMLElement): void {
     expect(floatingEl.style.transform).toBe("");
-    expect(floatingEl.style.top).toBe("");
-    expect(floatingEl.style.left).toBe("");
+    expect(floatingEl.style.top).toBe("0");
+    expect(floatingEl.style.left).toBe("0");
+    expect(floatingEl.style.display).toBe("");
   }
 
   function assertOpenPositioning(floatingEl: HTMLElement): void {
     expect(floatingEl.style.transform).not.toBe("");
     expect(floatingEl.style.top).toBe("0");
     expect(floatingEl.style.left).toBe("0");
+    expect(floatingEl.style.display).toBe("");
   }
 
   it("repositions only for open components", async () => {
     await reposition(fakeFloatingUiComponent, positionOptions);
-    assertPreOpenPositioning(floatingEl);
+    assertClosedPositioning(floatingEl);
 
     fakeFloatingUiComponent.open = true;
 
@@ -101,6 +107,8 @@ describe("repositioning", () => {
   });
 
   it("repositions immediately by default", async () => {
+    assertClosedPositioning(floatingEl);
+
     fakeFloatingUiComponent.open = true;
 
     reposition(fakeFloatingUiComponent, positionOptions);
@@ -112,6 +120,8 @@ describe("repositioning", () => {
   });
 
   it("can reposition after a delay", async () => {
+    assertClosedPositioning(floatingEl);
+
     fakeFloatingUiComponent.open = true;
 
     reposition(fakeFloatingUiComponent, positionOptions, true);

packages/calcite-components/src/utils/floating-ui.ts

@@ -155,13 +155,16 @@ export const positionFloatingUI =
 
     const { open } = component;
 
+    if (!open) {
+      Object.assign(floatingEl.style, hiddenFloatingElStyle);
+      return;
+    }
+
     Object.assign(floatingEl.style, {
       visibility,
       pointerEvents,
       position,
-      transform: open ? `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)` : "",
-      top: 0,
-      left: 0,
+      transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
     });
   };
 
@@ -408,6 +411,18 @@ export function getEffectivePlacement(placement: LogicalPlacement, isRTL = false
   return placement.replace(/leading/gi, placements[0]).replace(/trailing/gi, placements[1]) as EffectivePlacement;
 }
 
+const initialFloatingElStyle = {
+  display: "",
+  // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout
+  position: "absolute",
+  top: "0",
+  left: "0",
+};
+
+const hiddenFloatingElStyle = {
+  display: "none",
+};
+
 /**
  * Convenience function to manage `reposition` calls for FloatingUIComponents that use `positionFloatingUI.
  *
@@ -433,10 +448,17 @@ export async function reposition(
   options: Parameters<typeof positionFloatingUI>[1],
   delayed = false,
 ): Promise<void> {
-  if (!component.open || !options.floatingEl || !options.referenceEl) {
+  if (!options.floatingEl) {
     return;
   }
 
+  if (!component.open || !options.referenceEl) {
+    Object.assign(options.floatingEl.style, hiddenFloatingElStyle);
+    return;
+  }
+
+  Object.assign(options.floatingEl.style, initialFloatingElStyle);
+
   const trackedState = autoUpdatingComponentMap.get(component);
 
   if (!trackedState) {
@@ -551,13 +573,7 @@ export async function connectFloatingUI(
 
   disconnectFloatingUI(component, referenceEl, floatingEl);
 
-  Object.assign(floatingEl.style, {
-    visibility: "hidden",
-    pointerEvents: "none",
-
-    // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout
-    position: component.overlayPositioning,
-  });
+  Object.assign(floatingEl.style, hiddenFloatingElStyle);
 
   if (!component.open) {
     return;