Merge pull request #206 from matyasjay/add-international-phone-option

feat: add international option to Phone
onebeyond · Mar 1, 2024 · c490d2c · c490d2c
2 parents def8ecf + 3eef9ca
commit c490d2c
Show file tree

Hide file tree

Showing 6 changed files with 363 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
@@ -598,6 +598,7 @@ https://user-images.githubusercontent.com/79102959/134945855-52577cab-9b16-4df5-
 | label | Text to show over the input | string | '' |
 | placeholder | Placeholder text to be displayed in the select | string | '' |
 | defaultCountry | Country to show by default | string | GB |
+| international | Force display country prefix in input | boolean | - |
 | **errorMessages** | | json | |
 | required | Error message to display on submit if the phone input is not filled and is required | string | ''
 | **registerConfig** | | json |
@@ -1040,4 +1041,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@onebeyond/react-form-builder",
- "version": "1.3.0",
+ "version": "1.4.0",
  "description": "React from builder using json schema",
  "author": "One Beyond",
  "license": "MIT",

diff --git a/src/Questions/Phone/__tests__/phone.test.js b/src/Questions/Phone/__tests__/phone.test.js
@@ -107,3 +107,15 @@ test('pattern error is displayed', () => {
 
  expect(screen.getByText('This is not the right pattern'))
 })
+
+test('country code is visible', () => {
+ const result = render(
+ <QuestionPhone
+ question={{ ...question, defaultCountry: 'GB', international: true }}
+ useForm={formMethods}
+ />
+ )
+ expect(
+ result.container.querySelector('input[type="tel"]').getAttribute('value')
+ ).toBe('+44')
+})
diff --git a/src/Questions/Phone/index.js b/src/Questions/Phone/index.js
@@ -44,6 +44,7 @@ const QuestionPhone = ({ isMobile, isoCode, question, useForm, ...props }) => {
  placeholder={question.placeholder}
  registerConfig={question.registerConfig}
  name={question.name}
+ international={question.international}
  {...props}
  />