Skip to content

Conversation

@github-actions
Copy link
Contributor

Release
@floating-ui/vue@1.1.5

Diff for packages/vue

Diff
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index e41a287b..947b6e2e 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @floating-ui/vue
 
+## 1.1.5
+
+### Patch Changes
+
+- fix(useFloating): avoid setting `isPositioned` to true when `open` is false
+- Update dependencies: `@floating-ui/utils@0.2.8`
+
 ## 1.1.4
 
 ### Patch Changes
diff --git a/packages/vue/package.json b/packages/vue/package.json
index bef29f4a..c7dff307 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@floating-ui/vue",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Floating UI for Vue",
   "publishConfig": {
     "access": "public"
diff --git a/packages/vue/src/useFloating.ts b/packages/vue/src/useFloating.ts
index 904f0dc6..9897dba5 100644
--- a/packages/vue/src/useFloating.ts
+++ b/packages/vue/src/useFloating.ts
@@ -91,6 +91,8 @@ export function useFloating<T extends ReferenceElement = ReferenceElement>(
       return;
     }
 
+    const open = openOption.value;
+
     computePosition(referenceElement.value, floatingElement.value, {
       middleware: middlewareOption.value,
       placement: placementOption.value,
@@ -101,7 +103,13 @@ export function useFloating<T extends ReferenceElement = ReferenceElement>(
       strategy.value = position.strategy;
       placement.value = position.placement;
       middlewareData.value = position.middlewareData;
-      isPositioned.value = true;
+      /**
+       * The floating element's position may be recomputed while it's closed
+       * but still mounted (such as when transitioning out). To ensure
+       * `isPositioned` will be `false` initially on the next open, avoid
+       * setting it to `true` when `open === false` (must be specified).
+       */
+      isPositioned.value = open !== false;
     });
   }
 
@@ -136,9 +144,13 @@ export function useFloating<T extends ReferenceElement = ReferenceElement>(
     }
   }
 
-  watch([middlewareOption, placementOption, strategyOption], update, {
-    flush: 'sync',
-  });
+  watch(
+    [middlewareOption, placementOption, strategyOption, openOption],
+    update,
+    {
+      flush: 'sync',
+    },
+  );
   watch([referenceElement, floatingElement], attach, {flush: 'sync'});
   watch(openOption, reset, {flush: 'sync'});
 
diff --git a/packages/vue/test/index.test.ts b/packages/vue/test/index.test.ts
index e98bbe03..b14a41a5 100644
--- a/packages/vue/test/index.test.ts
+++ b/packages/vue/test/index.test.ts
@@ -237,6 +237,35 @@ describe('useFloating', () => {
     });
   });
 
+  test('updates `isPositioned` on open change', async () => {
+    const App = defineComponent({
+      name: 'App',
+      props: ['open'],
+      setup(props: {open?: boolean}) {
+        return setup({open: toRef(props, 'open')});
+      },
+      template: /* HTML */ `
+        <div ref="reference" />
+        <div ref="floating" />
+        <div data-testid="isPositioned">{{isPositioned}}</div>
+      `,
+    });
+
+    const {rerender, getByTestId} = render(App, {
+      props: {open: false},
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('isPositioned').textContent).toBe('false');
+    });
+
+    await rerender({open: true});
+
+    await waitFor(() => {
+      expect(getByTestId('isPositioned').textContent).toBe('true');
+    });
+  });
+
   test('resets `isPositioned` on open change', async () => {
     const App = defineComponent({
       name: 'App',
@@ -295,6 +324,41 @@ describe('useFloating', () => {
     });
   });
 
+  test('does not set `isPositioned` to true when open is false', async () => {
+    const App = defineComponent({
+      name: 'App',
+      props: ['open', 'strategy'],
+      setup(props: {open?: boolean; strategy?: Strategy}) {
+        return setup({
+          open: toRef(props, 'open'),
+          strategy: toRef(props, 'strategy'),
+        });
+      },
+      template: /* HTML */ `
+        <div ref="reference" />
+        <div ref="floating" />
+        <div data-testid="position">{{strategy}}</div>
+        <div data-testid="isPositioned">{{isPositioned}}</div>
+      `,
+    });
+
+    const {rerender, getByTestId} = render(App, {
+      props: {open: false, strategy: 'absolute'},
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('position').textContent).toBe('absolute');
+      expect(getByTestId('isPositioned').textContent).toBe('false');
+    });
+
+    await rerender({strategy: 'fixed'});
+
+    await waitFor(() => {
+      expect(getByTestId('position').textContent).toBe('fixed');
+      expect(getByTestId('isPositioned').textContent).toBe('false');
+    });
+  });
+
   test('fallbacks to default when placement becomes undefined', async () => {
     const App = defineComponent({
       name: 'App',

Full diff
1.1.4...1.1.5.

@DanielleHuisman DanielleHuisman marked this pull request as ready for review September 24, 2024 16:30
@DanielleHuisman DanielleHuisman merged commit 8928507 into main Sep 24, 2024
@DanielleHuisman DanielleHuisman deleted the upstream/vue-1.1.5 branch September 24, 2024 16:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants