fix: resolve Select component hydration issue in booking dialog #2237
Merged
fix: resolve Select component hydration issue in booking dialog #2237
Conversation
Fix React Error #418 hydration mismatch in AddAssetsToExistingBookingDialog that prevented the select dropdown from opening in production. Changes: - Remove `asChild` prop from SelectItem to prevent hydration issues - Add `position="popper"` to SelectContent for better modal positioning - Use `--radix-select-trigger-width` CSS variable to match trigger width - Pin Node version in Dockerfile to 22.20.0 to match local environment The `asChild` prop combined with the DateS component (which uses timezone hints) caused server/client HTML mismatch. This aligns with patterns used in other working dialogs like invite-user-dialog.tsx.
Refactor AddAssetsToExistingBookingDialog to use useApiQuery hook instead of manual fetch calls, and add comprehensive empty state handling. Changes to dialog component: - Replace manual fetch with useApiQuery hook for better error handling - Add dynamic placeholder text based on loading/empty/ready states - Show empty state message in dropdown when no bookings available - Add informative message when no draft/reserved bookings exist - Update type definitions to match API response structure Changes to API endpoint: - Update bookings.get-all to return both DRAFT and RESERVED bookings - Previously only returned DRAFT, now includes RESERVED for better UX - Aligns with pattern used elsewhere in codebase for booking selection This fixes inconsistent behavior where bookings would sometimes not load, and provides clear feedback to users when no bookings are available.
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fix React Error hydration mismatch in
AddAssetsToExistingBookingDialogthat prevented the select dropdown from opening in production.
Changes:
asChildprop from SelectItem to prevent hydration issuesposition="popper"to SelectContent for better modal positioning--radix-select-trigger-widthCSS variable to match trigger widthThe
asChildprop combined with the DateS component (which uses timezonehints) caused server/client HTML mismatch. This aligns with patterns used
in other working dialogs like invite-user-dialog.tsx.