Forms: add combobox for phone country selector #45120
Merged
Conversation
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
…country selection on inspector controls
CGastrell
added
[Status] In Progress
[Type] Task
[Plugin] Jetpack
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
github-actions
bot
added
[Block] Contact Form
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! Jetpack plugin: The Jetpack plugin has different release cadences depending on the platform:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. |
Code Coverage SummaryCoverage changed in 6 files. Only the first 5 are listed here.
2 files are newly checked for coverage.
Full summary · PHP report · JS report Coverage check overridden by
Coverage tests to be added later
|
CGastrell
added a commit
that referenced
this pull request
Sep 10, 2025
This reverts commit ad39a2a.
enejb
pushed a commit
that referenced
this pull request
Sep 25, 2025
* adapt process to use two letter country code, derive state from it * remove debugging code * remove field-phone registration and handlers * deprovision default when not using country selector on phone field * cleanup useless code * use the right field type for international phone number: phone * remove field-phone registration and handlers * temp, working forwards * migrating to interactivity, wip * fully working, needs cleanup and styling * clean up code and styles * switch to probe styles specific to background colors * fix some failing styles * use new initialization and dom listener * remove old actions, use more consistent naming * add arrow navigation for dropdown * update test after new markup * show country toggle on toolbar * forgotten context consumer declaration * poc: use just flag and trunk on block, provide more complete default country selection on inspector controls * fix searchterm being case sensitive * scroll country list to top when searching * allow arrow key navigation and selection even when there is no search term * arrow key navigation selects and scrolls to country * use pseudo element for down arrow, fix a couple of inconsistent styles * fix indentation * remove unused styling * make phone input look better with animated and outlined styles * minor style/class fixes * changelog * split combobox to shared component, add handlers * add navigation to combobox on editor * make it a bit more agnostic * allow enter to select the first option if the user has performed a search * address PR comments * inherit background color so input background is honored, but it's tricky, needs testing * adjust colors to inherit from current * address more PR comments * need to rebuild css class names as they come with 'class=' attached, including quotes * fix test for phone input * use provided styles for dropdown * address bug with calculated probe styles: use browser default 1.2 instead of 'normal' * address width and positioning issues * fix styles colliding with defaults, use presets for color highlight * use fallback color as it's more reliable than the detected background * change down arrow, use svg instead of pseudo element * use detected radius style when possible * fix animated and outlined styles on combobox * use safe background color to avoid falling into transparent * inherit styles from block props * fix some quirks on editor styles to match frontend * fix @SInCE docblock for next version * add Jetpack changelog
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.
Second attempt after reverted #45018
Phone field with country selector, second iteration.
Proposed changes:
This PR implements a searchable dropdown for the country selector on the phone field.
Working on the editor:
Screen.Recording.2025-09-05.at.16.14.53.mov
Working on the frontend:
Screen.Recording.2025-09-05.at.16.16.01.mov
NOTE: the default country setting on the inspector sidebar can remain as a secondary way of setting it or we can remove it all along. It doesn't look as nice, but as a setting it also makes sense to leave it there.
Other information:
Jetpack product discussion
None
Does this pull request change what data or activity we track or use?
No
Testing instructions:
Test: