[BUG]: The focus state of the production key CardNumberElement is unstable

[transitiongo]

What happened?

Steps to reproduce:
1、Ensure the latest version of Chrome is installed, then switch to mobile mode.
2、
Here is my reproduction code, and the publishableKey I’m using works fine.
However, when switched to our production key, the issue occurs.
I currently can’t provide our production publishableKey, but can you reproduce it using your own publishableKey?

2024-12-03.10.56.03.-.Compressed.with.FlexClip.mp4

Because our business heavily relies on this interaction, this is how it looks in our use case.
This also causes the soft keyboard to jitter.

2024-12-03.10.58.59.-.Compressed.with.FlexClip.mp4

This is the effect on a Samsung S20 with the latest Chrome version and the latest Android version.

IMG_1601.2.-.Compressed.with.FlexClip.-.Compressed.with.FlexClip.-.Compressed.with.FlexClip.mp4

Environment

macos 14.6.1 (23G93) chrome 131.0.6778.86（正式版本） (arm64)

Reproduction

https://codesandbox.io/p/sandbox/7mk4r4

[brendanm-stripe]

Hey there, taking a look at your reproduction (thanks for that!), I can see you've implemented some floating labels that overlap with the input fields and animate on focus when empty.

From my testing, the focus/blur issues are directly tied to this label design/behaviour. Taking those away, or disabling the ovarlay/animation, eliminates the problem.

We've been unable to reproduce this behaviour in any other split card element test integration (ie, without such labels), so I would recommend debugging that implementation and consider not placing labels in a way that overlaps the input fields.

[brendanm-stripe]

If you are able to reproduce this without such a label implementation, please do share that example & necessary steps so that we can investigate again.

[transitiongo]

嘿，看看你的复制品（谢谢！），我看到你已经实现了一些与输入字段重叠的浮动标签，并且在空时在焦点上进行动画处理。

根据我的测试，焦点/模糊问题与此标签设计/行为直接相关。删除这些或取消ovarlay/动画即可消除此问题。

我们无法在任何其他分割卡元素测试集成（即没有这样的标签）中取消这种行为，我建议调试该行为实现并不要考虑因此与输入字段重叠的方式放置标签。

Hello, thank you very much for your response.
Yes, we have already removed such interactions in our business system, replacing them with simple form elements. However, the issue still persists, albeit less severe—it only results in the cursor not being displayed. Nonetheless, this still impacts the user experience.

In standard interaction guidelines, the absence of a cursor while entering input is quite odd, especially for a critical payment component. I am concerned that this might create psychological stress for our users.

If this issue can be resolved, we can continue using the aforementioned interaction approach without the cursor problem recurring.

[transitiongo]

如果您能够_在没有_此类标签的情况下重新出现此问题，请分享该示例和必要的步骤，以便我们再次调查。

Hello,

Even if I don’t use this interaction, the issue of the cursor not appearing and not being properly focused still occurs.

I have also communicated with the Stripe team via email, and this issue is quite strange. It seems to be related to the publishableKey. In our sandbox environment, the publishableKey does not cause this issue, but when switching to the production environment, the problem occurs.

[brendanm-stripe]

I would recommend continuing to work via that support case, then. If you have a reproduction of this effect without the previous label implementation, I recommend sharing that in the case along with steps to reproduce the behaviour.