fix: mismatch target/recipient origin error

src/elements/CardExpirationDateElement.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ForwardedRef, RefObject, useRef } from 'react';
+import React, { FC, ForwardedRef, MutableRefObject, useRef } from 'react';
 import type {
   CardExpirationDateElement as ICardExpirationDateElement,
   CreateCardExpirationDateElementOptions,
@@ -30,12 +30,12 @@ interface CardExpirationDateElementProps {
   style?: ElementStyle;
   validateOnChange?: boolean;
   value?: CardExpirationDateValue<'static'> | string;
-  valueRef?: RefObject<ICardExpirationDateElement>;
+  valueRef?: MutableRefObject<ICardExpirationDateElement>;
 }
 
 const CardExpirationDateElementC: FC<
   CardExpirationDateElementProps & {
-    elementRef?: ForwardedRef<ICardExpirationDateElement>;
+    elementRef?: ForwardedRef<ICardExpirationDateElement | null>;
   }
 > = ({
   'aria-label': ariaLabel,
@@ -80,13 +80,10 @@ const CardExpirationDateElementC: FC<
       value,
     },
     bt,
-    elementRef
+    elementRef,
+    valueRef
   );
 
-  if (valueRef?.current) {
-    element?.setValueRef(valueRef.current);
-  }
-
   useListener('ready', element, onReady);
   useListener('change', element, onChange);
   useListener('focus', element, onFocus);

src/elements/CardNumberElement.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useRef, ForwardedRef, RefObject } from 'react';
+import React, { FC, useRef, ForwardedRef, MutableRefObject } from 'react';
 import type {
   CardNumberElement as ICardNumberElement,
   CreateCardNumberElementOptions,
@@ -34,7 +34,7 @@ interface CardNumberElementProps {
   style?: ElementStyle;
   validateOnChange?: boolean;
   value?: string;
-  valueRef?: RefObject<ICardNumberElement>;
+  valueRef?: MutableRefObject<ICardNumberElement | null>;
 }
 
 const CardNumberElementC: FC<
@@ -66,7 +66,9 @@ const CardNumberElementC: FC<
   const wrapperRef = useRef<HTMLDivElement>(null);
   const element = useElement<
     ICardNumberElement,
-    CreateCardNumberElementOptions
+    CreateCardNumberElementOptions & {
+      valueRef?: MutableRefObject<ICardNumberElement | null>;
+    }
   >(
     id,
     'cardNumber',
@@ -88,13 +90,10 @@ const CardNumberElementC: FC<
       value,
     },
     bt,
-    elementRef
+    elementRef,
+    valueRef
   );
 
-  if (valueRef?.current) {
-    element?.setValueRef(valueRef.current);
-  }
-
   useListener('ready', element, onReady);
   useListener('change', element, onChange);
   useListener('focus', element, onFocus);

src/elements/CardVerificationCodeElement.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useRef, ForwardedRef, RefObject } from 'react';
+import React, { FC, useRef, ForwardedRef, MutableRefObject } from 'react';
 import type {
   CardVerificationCodeElement as ICardVerificationCodeElement,
   CreateCardVerificationCodeElementOptions,
@@ -34,7 +34,7 @@ interface CardVerificationCodeElementProps {
   style?: ElementStyle;
   validateOnChange?: boolean;
   value?: string;
-  valueRef?: RefObject<ICardVerificationCodeElement>;
+  valueRef?: MutableRefObject<ICardVerificationCodeElement | null>;
 }
 
 const CardVerificationCodeElementC: FC<
@@ -86,13 +86,10 @@ const CardVerificationCodeElementC: FC<
       value,
     },
     bt,
-    elementRef
+    elementRef,
+    valueRef
   );
 
-  if (valueRef?.current) {
-    element?.setValueRef(valueRef.current);
-  }
-
   useListener('ready', element, onReady);
   useListener('change', element, onChange);
   useListener('focus', element, onFocus);

src/elements/TextElement.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useRef, ForwardedRef, RefObject } from 'react';
+import React, { FC, useRef, ForwardedRef, MutableRefObject } from 'react';
 import type {
   TextElement as ITextElement,
   CreateTextElementOptions,
@@ -29,7 +29,7 @@ interface BaseTextElementProps {
   transform?: RegExp | [RegExp, string?];
   validation?: RegExp;
   value?: string;
-  valueRef?: RefObject<ITextElement>;
+  valueRef?: MutableRefObject<ITextElement | null>;
 }
 
 interface MaskedTextElementProps extends BaseTextElementProps {
@@ -90,13 +90,10 @@ const TextElementC: FC<
       value,
     },
     bt,
-    elementRef
+    elementRef,
+    valueRef
   );
 
-  if (valueRef?.current) {
-    element?.setValueRef(valueRef.current);
-  }
-
   useListener('ready', element, onReady);
   useListener('change', element, onChange);
   useListener('focus', element, onFocus);

src/elements/useElement.ts

@@ -1,11 +1,24 @@
-import React, { ForwardedRef, useEffect, useRef, useState } from 'react';
+import React, {
+  ForwardedRef,
+  MutableRefObject,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import type {
   BaseElement,
   ElementType,
 } from '@basis-theory/basis-theory-js/types/elements';
 import { BasisTheoryReact } from '../core';
 import { useBasisTheoryValue } from './useBasisTheoryValue';
 
+type ElementWithSetValueRef = BaseElement<any, any> & {
+  setValueRef: (element: BaseElement<any, any>) => void;
+};
+
+const elementHasSetValueRef = (val: unknown): val is ElementWithSetValueRef =>
+  Boolean((val as ElementWithSetValueRef).setValueRef);
+
 const shallowDifference = <
   A extends Record<string, unknown>,
   B extends Record<string, unknown>
@@ -51,7 +64,8 @@ const useElement = <
   wrapperRef: React.RefObject<HTMLDivElement>,
   options: Options,
   btFromProps?: BasisTheoryReact,
-  ref?: ForwardedRef<Element>
+  ref?: ForwardedRef<Element>,
+  targetValueRef?: MutableRefObject<Element | null>
 ): Element | undefined => {
   const bt = useBasisTheoryValue(btFromProps);
   const [lastOptions, setLastOptions] = useState<Options>();
@@ -75,11 +89,18 @@ const useElement = <
         ref.current = newElement;
       }
 
-      newElement.mount(`#${id}`).catch((mountError) => {
-        setLastOptions(() => {
-          throw mountError;
+      (async () => {
+        await newElement.mount(`#${id}`).catch((mountError) => {
+          setLastOptions(() => {
+            throw mountError;
+          });
         });
-      });
+
+        if (elementHasSetValueRef(newElement) && targetValueRef?.current) {
+          newElement.setValueRef(targetValueRef.current);
+        }
+      })();
+
       bt.indexElement(id, newElement);
       setLastOptions(options);
     }

test/elements/CardExpirationDateElement.test.tsx

@@ -18,6 +18,8 @@ describe('CardExpirationDateElement', () => {
   const chance = new Chance();
   const refArray = [React.createRef<ICardExpirationDateElement>(), undefined];
 
+  const valueRef = React.createRef<ICardExpirationDateElement>();
+
   let id: string;
   let wrapperDiv: HTMLDivElement;
   let style: ElementStyle;
@@ -93,7 +95,7 @@ describe('CardExpirationDateElement', () => {
         style={style}
         validateOnChange={validateOnChange}
         value={value}
-        valueRef={React.createRef()}
+        valueRef={valueRef}
       />
     );
 
@@ -117,7 +119,8 @@ describe('CardExpirationDateElement', () => {
       },
       undefined,
       // eslint-disable-next-line unicorn/no-null
-      typeof ref === 'undefined' ? null : ref // undefined ref gets forwarded as null
+      typeof ref === 'undefined' ? null : ref, // undefined ref gets forwarded as null,
+      valueRef // undefined ref gets forwarded as null
     );
     expect(useListener).toHaveBeenCalledWith('ready', element, onReady);
     expect(useListener).toHaveBeenCalledWith('change', element, onChange);

test/elements/CardNumberElement.test.tsx

@@ -18,6 +18,8 @@ describe('CardNumberElement', () => {
   const chance = new Chance();
   const refArray = [React.createRef<ICardNumberElement>(), undefined];
 
+  const valueRef = React.createRef<ICardNumberElement>();
+
   let id: string;
   let wrapperDiv: HTMLDivElement;
   let style: ElementStyle;
@@ -93,7 +95,7 @@ describe('CardNumberElement', () => {
         style={style}
         validateOnChange={validateOnChange}
         value={value}
-        valueRef={React.createRef()}
+        valueRef={valueRef}
       />
     );
 
@@ -119,7 +121,8 @@ describe('CardNumberElement', () => {
       },
       undefined,
       // eslint-disable-next-line unicorn/no-null
-      typeof ref === 'undefined' ? null : ref // undefined ref gets forwarded as null
+      typeof ref === 'undefined' ? null : ref, // undefined ref gets forwarded as null
+      valueRef // undefined ref gets forwarded as null
     );
     expect(useListener).toHaveBeenCalledWith('ready', element, onReady);
     expect(useListener).toHaveBeenCalledWith('change', element, onChange);

test/elements/CardVerificationCodeElement.test.tsx

@@ -19,6 +19,8 @@ describe('CardVerificationCodeElement', () => {
   const chance = new Chance();
   const refArray = [React.createRef<ICardVerificationCodeElement>(), undefined];
 
+  const valueRef = React.createRef<ICardVerificationCodeElement>();
+
   let id: string;
   let wrapperDiv: HTMLDivElement;
   let style: ElementStyle;
@@ -91,7 +93,7 @@ describe('CardVerificationCodeElement', () => {
         style={style}
         validateOnChange={validateOnChange}
         value={value}
-        valueRef={React.createRef()}
+        valueRef={valueRef}
       />
     );
 
@@ -116,7 +118,8 @@ describe('CardVerificationCodeElement', () => {
       },
       undefined,
       // eslint-disable-next-line unicorn/no-null
-      typeof ref === 'undefined' ? null : ref // undefined ref gets forwarded as null
+      typeof ref === 'undefined' ? null : ref, // undefined ref gets forwarded as null
+      valueRef
     );
     expect(useListener).toHaveBeenCalledWith('ready', element, onReady);
     expect(useListener).toHaveBeenCalledWith('change', element, onChange);

test/elements/TextElement.test.tsx

@@ -17,6 +17,8 @@ describe('TextElement', () => {
   const chance = new Chance();
   const refArray = [React.createRef<ITextElement>(), undefined];
 
+  const valueRef = React.createRef<ITextElement>();
+
   let id: string;
   let wrapperDiv: HTMLDivElement;
   let style: ElementStyle;
@@ -99,7 +101,7 @@ describe('TextElement', () => {
         transform={transform}
         validation={validation}
         value={value}
-        valueRef={React.createRef()}
+        valueRef={valueRef}
       />
     );
 
@@ -125,7 +127,8 @@ describe('TextElement', () => {
       },
       undefined,
       // eslint-disable-next-line unicorn/no-null
-      typeof ref === 'undefined' ? null : ref // undefined ref gets forwarded as null
+      typeof ref === 'undefined' ? null : ref, // undefined ref gets forwarded as null
+      valueRef
     );
     expect(useListener).toHaveBeenCalledWith('ready', element, onReady);
     expect(useListener).toHaveBeenCalledWith('change', element, onChange);