admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix phone input clearing its value when hitting space (#13031)

Browse Source 
This PR fixes a bug with phone input clearing its value when we press
space right after a country calling code.

As the problem comes from the library `react-phone-input-number` this PR
implements a yarn patch.

Fixes https://github.com/twentyhq/twenty/issues/12903
This commit is contained in:
Lucas Bordeau
2025-07-04 16:13:16 +02:00
committed by GitHub
parent 7a2b6bd4d6
commit 8a5a9554d9
3 changed files with 64 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
.yarn/patches/react-phone-number-input-npm-3.4.5-dc2895c306.patch Normal file
View File

@ -0,0 +1,45 @@
diff --git a/commonjs/helpers/phoneInputHelpers.js b/commonjs/helpers/phoneInputHelpers.js
index 8fd1b16ec670ab7d0abcb800a2edd7848e86ce1e..ab6e0dd90def507629c2ead59fba929a739f0759 100644
--- a/commonjs/helpers/phoneInputHelpers.js
+++ b/commonjs/helpers/phoneInputHelpers.js
@@ -574,7 +574,9 @@ function onPhoneDigitsChange(phoneDigits, _ref5) {
// Generate the new `value` property.
var value;
if (phoneDigits) {
- if (phoneDigits[0] === '+') {
+ if(phoneDigits === prevPhoneDigits) {
+ value = e164(phoneDigits, country, metadata)
+ } else if (phoneDigits[0] === '+') {
if (phoneDigits === '+') {
value = undefined;
} else if (country && (0, _getInternationalPhoneNumberPrefix["default"])(country, metadata).indexOf(phoneDigits) === 0) {
diff --git a/modules/helpers/phoneInputHelpers.js b/modules/helpers/phoneInputHelpers.js
index 75e8463f6b5d32c560d1dec2776671bee2af1d07..99af2904807cc3c23aea566bbeebda2a5bc9afa4 100644
--- a/modules/helpers/phoneInputHelpers.js
+++ b/modules/helpers/phoneInputHelpers.js
@@ -551,7 +551,9 @@ export function onPhoneDigitsChange(phoneDigits, _ref5) {
// Generate the new `value` property.
var value;
if (phoneDigits) {
- if (phoneDigits[0] === '+') {
+ if(phoneDigits === prevPhoneDigits) {
+ value = e164(phoneDigits, country, metadata)
+ } else if (phoneDigits[0] === '+') {
if (phoneDigits === '+') {
value = undefined;
} else if (country && getInternationalPhoneNumberPrefix(country, metadata).indexOf(phoneDigits) === 0) {
diff --git a/react-styleguidist/project/source/helpers/phoneInputHelpers.js b/react-styleguidist/project/source/helpers/phoneInputHelpers.js
index b844ef0fd183fe4f45e436bdb2382fc2987dcef2..8960834900e59a57e130521fd369e82fe05f5090 100644
--- a/react-styleguidist/project/source/helpers/phoneInputHelpers.js
+++ b/react-styleguidist/project/source/helpers/phoneInputHelpers.js
@@ -505,7 +505,9 @@ export function onPhoneDigitsChange(phoneDigits, {
// Generate the new `value` property.
let value
if (phoneDigits) {
- if (phoneDigits[0] === '+') {
+ if(phoneDigits === prevPhoneDigits) {
+ value = e164(phoneDigits, country, metadata)
+ } else if (phoneDigits[0] === '+') {
if (phoneDigits === '+') {
value = undefined
} else if (country && getInternationalPhoneNumberPrefix(country, metadata).indexOf(phoneDigits) !== 0) {

2
package.json
View File

@ -168,7 +168,7 @@
"react-imask": "^7.6.0",
"react-intersection-observer": "^9.15.1",
"react-loading-skeleton": "^3.3.1",
"react-phone-number-input": "^3.3.4",
"react-phone-number-input": "patch:react-phone-number-input@npm%3A3.4.5#~/.yarn/patches/react-phone-number-input-npm-3.4.5-dc2895c306.patch",
"react-responsive": "^9.0.2",
"react-router-dom": "^6.4.4",
"react-textarea-autosize": "^8.4.1",

20
yarn.lock
View File

@ -51110,7 +51110,7 @@ __metadata:
languageName: node
linkType: hard
"react-phone-number-input@npm:^3.3.4":
"react-phone-number-input@npm:3.4.5":
version: 3.4.5
resolution: "react-phone-number-input@npm:3.4.5"
dependencies:
@ -51126,6 +51126,22 @@ __metadata:
languageName: node
linkType: hard
"react-phone-number-input@patch:react-phone-number-input@npm%3A3.4.5#~/.yarn/patches/react-phone-number-input-npm-3.4.5-dc2895c306.patch":
version: 3.4.5
resolution: "react-phone-number-input@patch:react-phone-number-input@npm%3A3.4.5#~/.yarn/patches/react-phone-number-input-npm-3.4.5-dc2895c306.patch::version=3.4.5&hash=4d6a74"
dependencies:
classnames: "npm:^2.5.1"
country-flag-icons: "npm:^1.5.11"
input-format: "npm:^0.3.10"
libphonenumber-js: "npm:^1.11.5"
prop-types: "npm:^15.8.1"
peerDependencies:
react: ">=16.8"
react-dom: ">=16.8"
checksum: 10c0/24d6cc7fcae591eb9c34f00ad781dcc0578fab0516bba3d4594dfe5c0e9debfb9d0c7ebe531a886e4694078dcba5b2e9b1d6d632759cc8d2de3d8b86448371a8
languageName: node
linkType: hard
"react-promise-suspense@npm:0.3.4":
version: 0.3.4
resolution: "react-promise-suspense@npm:0.3.4"
@ -57214,7 +57230,7 @@ __metadata:
react-imask: "npm:^7.6.0"
react-intersection-observer: "npm:^9.15.1"
react-loading-skeleton: "npm:^3.3.1"
react-phone-number-input: "npm:^3.3.4"
react-phone-number-input: "patch:react-phone-number-input@npm%3A3.4.5#~/.yarn/patches/react-phone-number-input-npm-3.4.5-dc2895c306.patch"
react-responsive: "npm:^9.0.2"
react-router-dom: "npm:^6.4.4"
react-textarea-autosize: "npm:^8.4.1"