Fix :: Bug in phone number input during enter key press (#5879)

* fix :: bug in country select

* typo fix
This commit is contained in:
Kiran Ashok 2023-03-30 11:03:29 +05:30 committed by GitHub
parent 8fb97f005b
commit e52bc6147d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 13 deletions

View file

@ -14,10 +14,6 @@ function ContinueButton({ setPage, formData, page, setCompleted, isLoading, setI
const keyDownHandler = (event) => {
if (event.key === 'Enter' && !activeCondition) {
if (page < 3) setPage((currPage) => currPage + 1);
if (page == 3) {
setIsLoading(true);
setCompleted(true);
}
}
};
document.addEventListener('keydown', keyDownHandler);

View file

@ -49,11 +49,6 @@ function ContinueButtonSelfHost({
}
}
if (page < 5) setPage((currPage) => currPage + 1);
if (page == 5) {
setIsLoading(true);
setCompleted(true);
return;
}
}
};
document.addEventListener('keydown', keyDownHandler);

View file

@ -243,7 +243,6 @@ export function Page2({ formData, setFormData, setPage, page, setCompleted, isLo
}
export function Page3({ formData, setFormData, setPage, page, setCompleted, isLoading, setIsLoading, darkMode }) {
const props = { formData, setFormData };
const btnProps = {
setPage,
page,
@ -259,10 +258,18 @@ export function Page3({ formData, setFormData, setPage, page, setCompleted, isLo
inputProps={{
autoFocus: true,
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
setIsLoading(true);
setCompleted(true);
}
}}
value={formData?.phoneNumber}
inputClass="tj-onboarding-phone-input"
containerClass="tj-onboarding-phone-input-wrapper"
onChange={(phone) => setFormData({ ...formData, phoneNumber: phone })}
onChange={(phone) => {
setFormData({ ...formData, phoneNumber: phone });
}}
isValid={(inputNumber, country, countries) => {
return countries.some((country) => {
return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);

View file

@ -44,6 +44,7 @@ function OnbboardingFromSH({ darkMode }) {
};
useEffect(() => {
if (page == 3) document.getElementsByClassName('tj-onboarding-phone-input').focus();
if (completed) {
authenticationService
.setupAdmin({
@ -283,7 +284,6 @@ export function Page2({ formData, setFormData, setPage, page, setCompleted, isLo
);
}
export function Page3({ formData, setFormData, setPage, page, setCompleted, isLoading, setIsLoading, darkMode }) {
const props = { formData, setFormData };
const btnProps = {
setPage,
page,
@ -302,7 +302,15 @@ export function Page3({ formData, setFormData, setPage, page, setCompleted, isLo
value={formData?.phoneNumber}
inputClass="tj-onboarding-phone-input"
containerClass="tj-onboarding-phone-input-wrapper"
onChange={(phone) => setFormData({ ...formData, phoneNumber: phone })}
onChange={(phone) => {
setFormData({ ...formData, phoneNumber: phone });
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
setIsLoading(true);
setCompleted(true);
}
}}
isValid={(inputNumber, country, countries) => {
return countries.some((country) => {
return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);