[PS-1438] Prevent new line feed when selecting password

[dnicolson]

Type of change

- [x] Bug fix
- [ ] New feature development
- [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
- [ ] Build/deploy pipeline (DevOps)
- [ ] Other

Objective

This pull request prevents selecting a trailing new line feed (0x0A) when selecting a password or triple clicking the password.

Code changes

This fixes an issue that only seems to affect Electron/Chromium, the issue is not reproducible in Safari or Firefox with the Electron HTML.

The issue appears to be triggered by a combination of whitespace between DOM elements and the use of the user-select CSS property on the buttons to the right, with a reduced example the whitespace change was enough to fix the issue.

Screenshots

https://user-images.githubusercontent.com/2276355/188950138-1e593426-2391-4786-9df3-330708cfdba3.mov

Before you submit

• Please add unit tests where it makes sense to do so (encouraged but not required)
• If this change requires a documentation update - notify the documentation team
• If this change has particular deployment requirements - notify the DevOps team

[bitwarden-bot]

Thank you for your contribution! We've added this to our internal Community PR board for review. ID: PS-1438

[dnicolson]

This fix only applies to the generator, are you referring to https://github.com/bitwarden/clients/pull/5887 for within the vault?

I just tested it again and it seems to work:

https://github.com/bitwarden/clients/assets/2276355/96e85e8c-5f78-4d73-8201-0797e60b7a04

[aj-rosado]

This fix only applies to the generator, are you referring to #5887 for within the vault?

I just tested it again and it seems to work:

Screen.Recording.2023-08-11.at.17.58.54.mov

I haven't tested the https://github.com/bitwarden/clients/pull/5887 yet. I'm still able to reproduce the issue on the generator on this branch, I'm testing on a Mac and from your video seems you're testing on the mac desktop application as well?

https://github.com/bitwarden/clients/assets/109146700/065cb24a-727a-4262-a1d3-d07eb3378df3

[dnicolson]

Yes, the Mac desktop application. Maybe there is a race condition, what if you replace setImmediate with setTimeout as in https://github.com/bitwarden/clients/pull/5887.

[aj-rosado]

Yes, the Mac desktop application. Maybe there is a race condition, what if you replace setImmediate with setTimeout as in #5887.

SetTimeout seems to solve it 😄 . With SetTimeout the changes on the misc.scss are not even necessary as the directive now seems to properly sanitize the text like on other clients.

The vault items are still not copying properly but I guess the https://github.com/bitwarden/clients/pull/5887 will fix it.

Could you please update the branch to use the SetTimeout and remove the changes on the misc.scss ?

Thank you again for your contribution 😃

[dnicolson]

I've replaced setImmediate with setTimeout.

ed383cf is still needed as it prevents the extra whitespace in the text selection, it doesn't affect the copying.

[aj-rosado]

Thank you your contribution @dnicolson , this has been approved by QA and merged to master 🎉

This fix will be part of a future release. 😄