[BUG]: Elements controls with floating labels are rendered incorrectly

[metalmarker]

What happened?

I'm using <Elements> in my React app and interested in using floating labels . The problem is that the controls are rendered incorrectly, as can be seen below.

I'm passing the following appearance object inside the options object passed to <Elements>:

 appearance = {
   theme: 'stripe',
   labels: 'floating'
 }

The result is this:

When I look on the CSS associated with the of each field, it looks like there's a calculation errors in the --c-labelFloatingTransform, --c-labelRestingTransform and --c-inputFloatingPaddingTop variables as they include a NaN. Once I manually override the NaNs variables, the controls render correctly.

_

Additional information:

• Removing labels: floating (i.e., labels above the controls) results in correctly rendered controls
• I'm using @stripe/stripe-js and stripe/react-stripe-js 2.4.0.

Environment

No response

Reproduction

No response

[brendanm-stripe]

Hey there, thanks for the report on this. We've been investigating. Can you confirm that your integration has the payment element inside a hidden element that you then make visible?

Assuming thats the case, we're working on a general fix but a workaround you might be able to use in the meantime is forcing an Appearance API recalculation after the container is visible using elements.update({ appearance: currentAppearance }).

[metalmarker]

Can you confirm that your integration has the payment element inside a hidden element that you then make visible?

Confirmed. That was one fast root cause analysis! I'm hiding the contents of the entire page (which includes the PaymentElement) until after it sends the onReady event.

I'll try out the suggested workaround. Thank you.

[metalmarker]

@brendanm-stripe it looks this was resolved (I'm now on stripe-js@3.0.5 and react-stripe-js@2.4.0). Great job!

[tylersmith-stripe]

Yes, to follow-up here, we've fixed this issue for the Payment Element!

We're continuing to apply this fix for Link Authentication Element and Address Element as a fast-follow.

We'll update and close out this ticket when those are fixed as well.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.