Merge pull request #1598 from Adyen/chore/better_prop_names_for_iOS_a…

…rrow_key_fix Better prop names for the iOS disable arrow key fix
Adyen · May 9, 2022 · 5e21b6d · 5e21b6d
2 parents 1020cf8 + 2776fd3
commit 5e21b6d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git 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<CardInputProps> = 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<CardInputProps> = 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<CardInputProps> = props => {
                             billingAddressRef={billingAddressRef}
                             partialAddressSchema={partialAddressSchema}
                             //
-                            disablingTrigger={elementTriggeringIOSFieldDisable}
+                            iOSFocusedField={iOSFocusedField}
                         />
                     </div>
                 )}

diff --git 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'}
                     />
                 </div>
             )}
@@ -172,7 +172,7 @@ export const CardFieldsWrapper = ({
                     requiredFields={billingAddressRequiredFields}
                     ref={billingAddressRef}
                     specifications={partialAddressSchema}
-                    disablingTrigger={disablingTrigger}
+                    iOSFocusedField={iOSFocusedField}
                 />
             )}
         </LoadingWrapper>

diff --git 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<AddressData>({
         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
@@ -20,7 +20,7 @@ export interface AddressProps {
     validationRules?: ValidatorRules;
     visibility?: string;
     overrideSchema?: AddressSpecifications;
-    disablingTrigger?: string;
+    iOSFocusedField?: string;
 }
 
 export interface AddressStateError {