diff --git a/packages/lib/src/components/Card/components/CardInput/CardInput.tsx b/packages/lib/src/components/Card/components/CardInput/CardInput.tsx index d83cb41247..1f8db02501 100644 --- a/packages/lib/src/components/Card/components/CardInput/CardInput.tsx +++ b/packages/lib/src/components/Card/components/CardInput/CardInput.tsx @@ -84,7 +84,7 @@ const CardInput: FunctionalComponent = props => { // re. Disable arrows for iOS: The name of the element calling for other elements to be disabled // - either a securedField type (like 'encryptedCardNumber') when call is coming from SF // or else the name of an internal, Adyen-web, element (like 'holderName') - const [elementTriggeringIOSFieldDisable, setElementTriggeringIOSFieldDisable] = useState(null); + const [iOSFocusedField, setIOSFocusedField] = useState(null); /** * LOCAL VARS @@ -146,7 +146,7 @@ const CardInput: FunctionalComponent = props => { */ const handleTouchstartIOS = useCallback((obj: TouchStartEventObj) => { const elementType = obj.fieldType !== 'webInternalElement' ? obj.fieldType : obj.name; - setElementTriggeringIOSFieldDisable(elementType); + setIOSFocusedField(elementType); }, []); // Callback for ErrorPanel @@ -425,7 +425,7 @@ const CardInput: FunctionalComponent = props => { billingAddressRef={billingAddressRef} partialAddressSchema={partialAddressSchema} // - disablingTrigger={elementTriggeringIOSFieldDisable} + iOSFocusedField={iOSFocusedField} /> )} diff --git a/packages/lib/src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx b/packages/lib/src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx index 63785fccd5..135a39d21f 100644 --- a/packages/lib/src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx +++ b/packages/lib/src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx @@ -68,7 +68,7 @@ export const CardFieldsWrapper = ({ showBrandIcon, showBrandsUnderCardNumber, // - disablingTrigger + iOSFocusedField }) => { const { i18n } = useCoreContext(); @@ -81,7 +81,7 @@ export const CardFieldsWrapper = ({ isValid={!!formValid.holderName} onBlur={handleChangeFor('holderName', 'blur')} onInput={handleChangeFor('holderName', 'input')} - disabled={disablingTrigger && disablingTrigger !== 'holderName'} + disabled={iOSFocusedField && iOSFocusedField !== 'holderName'} /> ); @@ -133,7 +133,7 @@ export const CardFieldsWrapper = ({ isValid={!!valid.taxNumber} onBlur={handleChangeFor('taxNumber', 'blur')} onInput={handleChangeFor('taxNumber', 'input')} - disabled={disablingTrigger && disablingTrigger !== 'kcpTaxNumberOrDOB'} + disabled={iOSFocusedField && iOSFocusedField !== 'kcpTaxNumberOrDOB'} /> )} @@ -146,7 +146,7 @@ export const CardFieldsWrapper = ({ valid={valid?.socialSecurityNumber} data={socialSecurityNumber} required={true} - disabled={disablingTrigger && disablingTrigger !== 'socialSecurityNumber'} + disabled={iOSFocusedField && iOSFocusedField !== 'socialSecurityNumber'} /> )} @@ -172,7 +172,7 @@ export const CardFieldsWrapper = ({ requiredFields={billingAddressRequiredFields} ref={billingAddressRef} specifications={partialAddressSchema} - disablingTrigger={disablingTrigger} + iOSFocusedField={iOSFocusedField} /> )} diff --git a/packages/lib/src/components/internal/Address/Address.tsx b/packages/lib/src/components/internal/Address/Address.tsx index c00330e733..b5cfce9613 100644 --- a/packages/lib/src/components/internal/Address/Address.tsx +++ b/packages/lib/src/components/internal/Address/Address.tsx @@ -13,12 +13,10 @@ import { ADDRESS_SCHEMA, FALLBACK_VALUE } from './constants'; import { getMaxLengthByFieldAndCountry } from '../../../utils/validator-utils'; export default function Address(props: AddressProps) { - const { label = '', requiredFields, visibility, disablingTrigger = null } = props; + const { label = '', requiredFields, visibility, iOSFocusedField = null } = props; const specifications = useMemo(() => new Specifications(props.specifications), [props.specifications]); - const requiredFieldsSchema = specifications - .getAddressSchemaForCountryFlat(props.countryCode) - .filter(field => requiredFields.includes(field)); + const requiredFieldsSchema = specifications.getAddressSchemaForCountryFlat(props.countryCode).filter(field => requiredFields.includes(field)); const { data, errors, valid, isValid, handleChangeFor, triggerValidation } = useForm({ schema: requiredFieldsSchema, @@ -27,6 +25,14 @@ export default function Address(props: AddressProps) { formatters: addressFormatters }); + /** + * For iOS: iOSFocusedField is the name of the element calling for other elements to be disabled + * - so if it is set (meaning we are in iOS *and* an input has been focussed) only enable the field that corresponds to this element + */ + const enabledFields: string[] = requiredFieldsSchema.filter(item => { + return !iOSFocusedField ? true : item === iOSFocusedField; + }); + /** * Effect that: * - Resets validation for all fields by triggering handleChangeFor(fieldName, 'input') @@ -98,7 +104,7 @@ export default function Address(props: AddressProps) { specifications={specifications} maxlength={getMaxLengthByFieldAndCountry(countrySpecificFormatters, fieldName, data.country, true)} trimOnBlur={true} - disabled={disablingTrigger && disablingTrigger !== fieldName} + disabled={!enabledFields.includes(fieldName)} /> ); }; diff --git a/packages/lib/src/components/internal/Address/types.ts b/packages/lib/src/components/internal/Address/types.ts index 427c030c6d..32d738922f 100644 --- a/packages/lib/src/components/internal/Address/types.ts +++ b/packages/lib/src/components/internal/Address/types.ts @@ -20,7 +20,7 @@ export interface AddressProps { validationRules?: ValidatorRules; visibility?: string; overrideSchema?: AddressSpecifications; - disablingTrigger?: string; + iOSFocusedField?: string; } export interface AddressStateError {