Credit card numbers are improperly formatted

[warsaw]

Steps To Reproduce

1. Go to 'Card'
2. Click on a Visa or Mastercard
3. View the Number

Expected Result

I'd expect to see a number formatted like 1234 5678 9012 3456, i.e. four groups of 4 numbers.

Actual Result

I see a number like 1234 567 8 90 12 3 456. This happens even if edit the card, delete the spaces and add them back in the right place.

Screenshots or Videos

Unavailable due to sensitive nature of actual numbers.

Additional Context

This doesn't happen for all cards. Some format just fine. I've only seen this for Visa and Mastercard numbers, but some Visa and Mastercard fields are fine. There's no commonality that I can tell. Only the macOS desktop version seems to be affected. iOS and iPadOS versions seem fine.

Operating System

macOS

Operating System Version

14.7.1

Installation method

Mac App Store

Build Version

2024.10.2 (32149)

Issue Tracking Info

• I understand that work is tracked outside of GitHub. A PR will be linked to this issue should one be opened to address it, but Bitwarden doesn't use fields like "assigned", "milestone", or "project" to track progress.

[bitwarden-bot]

Thank you for reporting this issue! We've added this to our internal tracking system.
ID: PM-14883

[rmcdowell-bitwarden]

Hi there,

Thank you for your report!

I was able to reproduce this issue, and I have flagged this to our engineering team.

If you wish to add any further information/screenshots/recordings etc., please feel free to do so at any time - our engineering team will be happy to review these.

Thanks once again!

[djsmith85]

Hi @warsaw and thank you for your report.

While fixing #12505 for the new UI's I did also check the desktop client and the spacing appears correct.

The spacing is defined within credit-card-number.pipe.ts and supports a few common brands.

• Is your credit-card maybe from an unsupported brand?
• Or does the number not fit the specified pattern?

Kind regards,
Daniel

[warsaw]

Hi @djsmith85

No, there's nothing odd or nonstandard about the cards I'm seeing the problem with. A perfect example is an Apple Card, brand Mastercard. On iOS and iPadOS Bitwarden, when you toggle reveal, the number shows up perfectly well as four four-digit spans separated by spaces. On macOS with Bitwarden client 2024.12.1 (34750) updated from the App Store, it shows up as 1234 567 8 90 12 3 456. Verified on both multiple macOS machines (both using Bitwarden from the App Store). I even tried editing the entry, completely deleting the number and retyping it as four four-digit spans, but again, it still shows up as above. I even tried sending the entire entry to the trash and entering an entirely new item information, and that still shows the card number incorrectly. Of course, syncing the vault on macOS and then on iOS shows it correctly on iOS.

[warsaw]

Also, looking at the code you referenced, I don't see the block layout I'm seeing described in that record at all.

[warsaw]

One other interesting data point. If you hit the copy icon on a badly formatted number in the macOS client, then paste the number, you do seem to get a correctly formatted 4x4 block of numbers. That in its own right can be problematic since not every website accepts spaces between blocks, but it's still interesting that even though the number is incorrectly formatted in the UI, it still at least pastes correctly.