Focus shift in CardElement

[ashbork]

Hi! Currently, the only way to shift focus automatically when specific parts of the CC form are filled is if the elements are Individual Card Elements. I was wondering if it'd be possible to make this functionality work out of the box in the single CardElement component? Exposing it as a prop (focusShift? = false) could be a good idea to prevent breaking backwards-compatibility. What do you think?

[chrissrogers]

I think this is a good FR .. potentially with a direct way of pushing focus into the various sub-elements within the CardElement

[hyanez-lightit]

Hi! Currently, the only way to shift focus automatically when specific parts of the CC form are filled is if the elements are Individual Card Elements. I was wondering if it'd be possible to make this functionality work out of the box in the single CardElement component? Exposing it as a prop (focusShift? = false) could be a good idea to prevent breaking backwards-compatibility. What do you think?

@chrissrogers @ashbork
Trying to achieve his behavior on Individual elements without success. Could you or anyone further elaborate how to achieve this? Haven't found any information online.

Moreover, when Upgrading from Hosted Fields to Elements, it is now throwing an error
missing-callback

minimum reproduceable code:

  const recurly = useRecurly();
  const elements = recurly.Elements();

  const cardNumberElement = elements.CardNumberElement();
  const cardMonthElement = elements.CardMonthElement();
  const cardYearElement = elements.CardYearElement();
  const cardCvvElement = elements.CardCvvElement();

 const onSubmit = (values: CheckoutSchemaType) => {
     recurly.token(
      elements,
      {
        first_name: values.firstName,
        last_name: values.lastName,
      },
      (error, token) => {
        if (error) return;

        console.log(token);
      }
    );
 }

[ashbork]

Hi! I'm not a member of the project and can only aid you in the first question - the behavior is shown in an example in the docs, specifically individual-card-elements-with-focus-shift-demo.jsx.

[hyanez-lightit]

Hi! I'm not a member of the project and can only aid you in the first question - the behavior is shown in an example in the docs, specifically individual-card-elements-with-focus-shift-demo.jsx.

That demo is not up to date i believe since the components dont accept a ref

[ashbork]

That demo seems to be running latest and I do recall refs working. I wasn't using it the way you are, though - instead of recurly.Elements() I imported them directly, just like the demo does - your reproduction seems to be using a different approach (elements.CardNumberElement() instead of <CardNumberElement .../>

[hyanez-lightit]

That demo seems to be running latest and I do recall refs working. I wasn't using it the way you are, though - instead of recurly.Elements() I imported them directly, just like the demo does - your reproduction seems to be using a different approach (elements.CardNumberElement() instead of <CardNumberElement .../>

Just tried it with the element component (as in the demo & your ex.) but ref is not accepted by the comp (error thrown by typescript & ref.current is null)

[ashbork]

You need to initialize the ref with null as such:

const cardCvvElement = React.useRef(null);

The demo doesn't do that because it isn't necessary without TypeScript.

[hyanez-lightit]

Still not accepted by the component. And fails to attach a value

Type '{ ref: MutableRefObject<HTMLInputElement | null>; }' is not assignable to type 'IntrinsicAttributes & IndividualElementOptions & CommonElementProps<IndividualElementChangeEvent>'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & IndividualElementOptions & CommonElementProps<IndividualElementChangeEvent>'.ts(2322)```

[ashbork]

I can reproduce this now, which is odd because I had focus shifting working. I'll try to reproduce it soon in the environment where that worked for me when I have some time. Sorry I couldn't be of more help, hope someone associated with the project can chime in!

[hyanez-lightit]

Thanks ash, yes i hope this gets addressed as its a common use of case