Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork668
fix(experience): fix country code dropdown positioning in account center#8078
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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:master
Are you sure you want to change the base?
fix(experience): fix country code dropdown positioning in account center#8078
Conversation
Pass the ref object instead of ref.current to ensure the dropdown canaccess the current input element when it opens, rather than receivingthe stale null value from initial render.
COMPARE TO |
| Name | Diff |
|---|---|
| packages/experience/src/shared/components/InputFields/SmartInputField/CountryCodeSelector/CountryCodeDropdown/index.tsx | 📉 -43 Bytes |
| packages/experience/src/shared/components/InputFields/SmartInputField/CountryCodeSelector/index.tsx | 📉 -37 Bytes |
| packages/experience/src/shared/components/InputFields/SmartInputField/index.tsx | 📉 -8 Bytes |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Pull request overview
This PR fixes a positioning bug where the country code dropdown appeared at the top-left of the page instead of below the phone input field in the account center. The root cause was passinginnerRef.current (which evaluates tonull during initial render) instead of the ref object itself, preventing the dropdown from calculating the correct position.
Key changes:
- Changed
inputRefprop from passinginnerRef.currenttoinnerRefin SmartInputField - Updated type definitions from
Nullable<HTMLInputElement>toReact.RefObject<HTMLInputElement | undefined>in CountryCodeSelector and CountryCodeDropdown - Updated the
updatePositioncallback to accessinputRef.current.parentElementinstead ofinputRef.parentElement, and fixed the dependency array
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/experience/src/shared/components/InputFields/SmartInputField/index.tsx | Changed to pass the ref object (innerRef) instead of its current value (innerRef.current) to CountryCodeSelector |
| packages/experience/src/shared/components/InputFields/SmartInputField/CountryCodeSelector/index.tsx | Updated type definition forinputRef prop fromNullable<HTMLInputElement> toReact.RefObject<HTMLInputElement | undefined> and removed unused import |
| packages/experience/src/shared/components/InputFields/SmartInputField/CountryCodeSelector/CountryCodeDropdown/index.tsx | Updated type definition forinputRef prop, corrected access to parent element viainputRef.current.parentElement, and fixed useCallback dependency array to use the ref object |
💡Add Copilot custom instructions for smarter, more guided reviews.Learn how to get started.
| readonlyclassName?:string; | ||
| readonlyvalue?:string; | ||
| readonlyinputRef?:Nullable<HTMLInputElement>; | ||
| readonlyinputRef?:React.RefObject<HTMLInputElement|undefined>; |
CopilotAIDec 16, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
The type definition should beReact.RefObject<HTMLInputElement> instead ofReact.RefObject<HTMLInputElement | undefined>. The ref object created withuseRef<HTMLInputElement>(null) has typeReact.RefObject<HTMLInputElement>, where the.current property can benull orHTMLInputElement, but the generic parameter itself should not includeundefined.
| readonlyinputRef?:React.RefObject<HTMLInputElement|undefined>; | |
| readonlyinputRef?:React.RefObject<HTMLInputElement>; |
| readonlycountryCode:string; | ||
| readonlycountryList:CountryMetaData[]; | ||
| readonlyinputRef?:Nullable<HTMLInputElement>; | ||
| readonlyinputRef?:React.RefObject<HTMLInputElement|undefined>; |
CopilotAIDec 16, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
The type definition should beReact.RefObject<HTMLInputElement> instead ofReact.RefObject<HTMLInputElement | undefined>. The ref object created withuseRef<HTMLInputElement>(null) has typeReact.RefObject<HTMLInputElement>, where the.current property can benull orHTMLInputElement, but the generic parameter itself should not includeundefined.
| readonlyinputRef?:React.RefObject<HTMLInputElement|undefined>; | |
| readonlyinputRef?:React.RefObject<HTMLInputElement>; |
Uh oh!
There was an error while loading.Please reload this page.
Summary
Root Cause
The
inputRefprop was passed asinnerRef.currentwhich evaluates tonullon initial render (before the ref is attached to the DOM). This caused theupdatePositionfunction to set an empty position object{}, resulting in the dropdown defaulting to top-left positioning.Fix
Pass the ref object itself instead of
.currentso the dropdown can access the current input element when it actually opens, rather than receiving the stalenullvalue from initial render.Test plan