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}
         />