fix(Calendar): race condition in month navigation (#1686)

Author: huntabyte

.changeset/deep-clubs-brake.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(Calendar): resolve race condition in month navigation

.github/workflows/ci.yml

@@ -72,11 +72,8 @@ jobs:
             - run: pnpm test:utils
 
     Test:
-        name: Test - ${{ matrix.browser }}
+        name: Test - Chromium
         runs-on: macos-latest
-        strategy:
-            matrix:
-                browser: [chromium, firefox, webkit]
         steps:
             - uses: actions/checkout@v4
             - uses: pnpm/action-setup@v4
@@ -88,15 +85,10 @@ jobs:
               run: pnpm install --frozen-lockfile
 
             - name: Install Playwright browser
-              run: pnpm dlx playwright install ${{ matrix.browser }}
+              run: pnpm dlx playwright install chromium
 
             - name: Build packages
               run: pnpm build:packages
 
             - name: Run browser tests
-              run: |
-                  if [ "${{ matrix.browser }}" = "firefox" ]; then
-                    rm -rf tests/node_modules/.vite && pnpm test:browser --browser ${{ matrix.browser }} --no-file-parallelism
-                  else
-                    rm -rf tests/node_modules/.vite && pnpm test:browser --browser ${{ matrix.browser }}
-                  fi
+              run: pnpm test:browser:chromium

package.json

@@ -13,6 +13,7 @@
 		"lint:fix": "eslint --fix .",
 		"test": "pnpm -F \"./{packages,tests}/**\" --parallel --reporter append-only --color test",
 		"test:browser": "pnpm -F tests test:browser",
+		"test:browser:chromium": "pnpm -F tests test:browser --browser chromium",
 		"test:components": "pnpm -F tests test",
 		"test:utils": "pnpm -F bits-ui test"
 	},

packages/bits-ui/src/lib/internal/date-time/calendar-helpers.svelte.ts

@@ -440,18 +440,20 @@ export function handleCalendarNextPage({
 	if (pagedNavigation) {
 		setPlaceholder(firstMonth.add({ months: numberOfMonths }));
 	} else {
+		// Calculate the target date first, then update both months and placeholder
+		// to ensure they're synchronized and prevent useMonthViewPlaceholderSync from
+		// double-triggering
+		const targetDate = firstMonth.add({ months: 1 });
 		const newMonths = createMonths({
-			dateObj: firstMonth.add({ months: 1 }),
+			dateObj: targetDate,
 			weekStartsOn,
 			locale,
 			fixedWeeks,
 			numberOfMonths,
 		});
-		setMonths(newMonths);
 
-		const firstNewMonth = newMonths[0];
-		if (!firstNewMonth) return;
-		setPlaceholder(firstNewMonth.value.set({ day: 1 }));
+		setPlaceholder(targetDate);
+		setMonths(newMonths);
 	}
 }
 
@@ -470,18 +472,20 @@ export function handleCalendarPrevPage({
 	if (pagedNavigation) {
 		setPlaceholder(firstMonth.subtract({ months: numberOfMonths }));
 	} else {
+		// Calculate the target date first, then update both months and placeholder
+		// to ensure they're synchronized and prevent useMonthViewPlaceholderSync from
+		// double-triggering
+		const targetDate = firstMonth.subtract({ months: 1 });
 		const newMonths = createMonths({
-			dateObj: firstMonth.subtract({ months: 1 }),
+			dateObj: targetDate,
 			weekStartsOn,
 			locale,
 			fixedWeeks,
 			numberOfMonths,
 		});
 
+		setPlaceholder(targetDate);
 		setMonths(newMonths);
-		const firstNewMonth = newMonths[0];
-		if (!firstNewMonth) return;
-		setPlaceholder(firstNewMonth.value.set({ day: 1 }));
 	}
 }