Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(RC-25445): use querySelectorPortal in pcln-menu and pcln-popover only when provided as a prop #1510

Merged
merged 8 commits into from
Sep 4, 2024

Conversation

raclee7
Copy link
Collaborator

@raclee7 raclee7 commented Aug 12, 2024

I noticed a hydration issue with CurrencySelector in @pcln/selectors while trying to migrate alt-landing app (which is only used for Airport Rental Cars landing page) to use DS6+React 18. @pcln/selectors > CurrencySelector is used in @pcln/white-label-components > Header.

@sdalonzo pointed out there was a bug with pcln-menu and pcln-popover (thank you!). In this PR I am making updates and adding test cases so that querySelectorPortal is only used in pcln-menu and pcln-popover only when provided as a prop.

Copy link

codecov bot commented Aug 12, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.75%. Comparing base (c034f04) to head (b2a6d8f).
Report is 2 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #1510   +/-   ##
=======================================
  Coverage   93.75%   93.75%           
=======================================
  Files         149      149           
  Lines       11275    11275           
  Branches      690      685    -5     
=======================================
  Hits        10571    10571           
  Misses        685      685           
  Partials       19       19           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@@ -69,14 +69,14 @@ function Menu({
trapFocus={trapFocus}
width={width}
zIndex={zIndex}
querySelectorPortal={`.${querySelectorPortal}`}
querySelectorPortal={querySelectorPortal && `.${querySelectorPortal}`}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this would coerce to false. i think we want undefined (or construct the props and omit this if we don't want it). in that regard, it's not unlike Authorization header conversations.

querySelectorPortal ? `.${querySelectorPortal}` : undefined

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sdalonzo thanks for flagging! updated

@raclee7 raclee7 changed the title fix(RC-25445): use querySelectorPortal in pcln-menu only when provide… fix(RC-25445): use querySelectorPortal in pcln-menu and pcln-popover only when provided as a prop Aug 12, 2024
@raclee7 raclee7 merged commit 0cbb97d into main Sep 4, 2024
11 checks passed
@raclee7 raclee7 deleted the fix/RC-25445-menuSSR branch September 4, 2024 07:14
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.

4 participants