fix(otp-input): enhance OTP input handling for clipboard by AKSHAT2802 · Pull Request #3898 · Automattic/newspack-plugin

AKSHAT2802 · 2025-04-08T11:21:56Z

All Submissions:

Have you followed the Newspack Contributing guideline?
Does your code follow the WordPress' coding standards and VIP Go coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Closes https://app.asana.com/0/1208970929679778/1207509651211057/f

How to test the changes in this Pull Request:

Add add_filter( 'newspack_reader_activation_enabled', '__return_true' );
Open the site in incognito on Mobile.
Create a new account and log out.
Try logging in with the created account.
Copy OTP to the clipboard.
Try Pasting OTP from keyboard suggestion.

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully ran tests with your changes locally?

…hrome

AKSHAT2802 · 2025-04-08T11:45:15Z

Here are the Screen recordings
Before: (Staging site)
https://github.com/user-attachments/assets/57fbfe50-90fc-41e8-81ef-ba96bf3638ac

After: (Local site)
https://github.com/user-attachments/assets/fee04d7d-b88b-4834-acc8-ebfe8eab7e49

miguelpeixe

Thank you for addressing this!

I was able to confirm the issue on iPhone's Chrome and Firefox, but not on Safari. Unfortunately, this patch doesn't seem to fix it for those cases.

I wonder if using the navigator.credentials.get() API directly gives us better control to fill the inputs, rather than working around the autocomplete parameter.

AKSHAT2802 · 2025-04-09T13:38:48Z

I was able to confirm the issue on iPhone's Chrome and Firefox, but not on Safari. Unfortunately, this patch doesn't seem to fix it for those cases.

Thank you for checking this!
I just tested it again on iOS using Safari, Chrome, and Firefox — and in all three browsers, the OTP is getting filled correctly on my end. Would it be possible for you to recheck on your device? Maybe there's a slight variation in environment or configuration that’s affecting the behavior.

Is the testing device configured with this [Link]

I wonder if using the navigator.credentials.get() API directly gives us better control to fill the inputs, rather than working around the autocomplete parameter.

I explored using navigator.credentials.get() with the WebOTP API as well.

I implemented it locally, but found it wasn’t a feasible solution in our case due to a few limitations:

It relies on the WebOTP API, which is only available in some modern browsers.
It doesn’t support OTP via email. [link]
-Browser compatibility is limited, especially on iOS — it's only supported in Chrome on Android (no support in Firefox, Safari, etc.).
The SMS must follow a very specific format, including the domain on the last line to work properly. [Link]
Ref: MDN WebOTP API

So while navigator.credentials.get() offers tighter integration in ideal cases, it didn’t feel robust enough to rely on.

miguelpeixe · 2025-04-09T19:37:11Z

Thank you for thoroughly looking into my suggestion! I agree that it's not viable for our requirements.

Here's a screen recording of Chrome under iPhone running this branch:

ScreenRecording_04-09-2025.16-29-29_1.mov

AKSHAT2802 · 2025-04-10T13:12:58Z

I believe the new changes are unavailable on the staging site. Does this branch needs a redeployment to work with new code changes? (The previous merged PR also had the same branch name which may have lead to stale code).

Screen recording from iOS Chrome (Mail-OTP):

ScreenRecording_04-09-2025.13-49-21_1.MP4

miguelpeixe · 2025-04-10T13:47:40Z

I deployed this branch's latest commit to that site and tested it in incognito. Is my issue also reproducible for you in https://boldly-witty.jurassic.ninja so we can confirm it's an env problem?

AKSHAT2802 · 2025-04-11T06:52:52Z

Testing site: https://boldly-witty.jurassic.ninja/ is working fine for me. (Incognito mode, chrome, iOS)

Screen Recording:

ScreenRecording_04-11-2025.12-05-29_1.mov

miguelpeixe

I don't know what changed, but it's working consistently now. I also confirmed that the changed approach doesn't introduce regressions to the desktop experience.

I can only think that cache got in the way, even though it's strange because I was using a fresh incognito session every attempt. 🤷

github-actions · 2025-04-14T18:29:38Z

Hey @AKSHAT2802, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

# [6.5.0-alpha.1](v6.4.4...v6.5.0-alpha.1) (2025-04-23) ### Bug Fixes * add white background to Newspack admin screens ([#3909](#3909)) ([4c8409e](4c8409e)) * allow guest contributors to have empty archives ([#3902](#3902)) ([af8bed9](af8bed9)) * **analytics:** migrate back-end GA4 events to front-end ([#3895](#3895)) ([7e18628](7e18628)) * **auth-form:** check user before is_user_reader() call ([#3944](#3944)) ([1cbb760](1cbb760)) * avoid warning for network event ([#3942](#3942)) ([60d0aa3](60d0aa3)) * **bylines:** avoid rerendering of editable area ([#3896](#3896)) ([9fdf659](9fdf659)) * **bylines:** custom edited state for modal ([#3919](#3919)) ([2a1a800](2a1a800)) * **bylines:** get CAP data from the plugin's store ([#3906](#3906)) ([0745113](0745113)) * **corrections:** Limit CPT to posts only ([#3927](#3927)) ([1d49c39](1d49c39)) * **corrections:** Use Corrections Archive template by default ([#3929](#3929)) ([c4c1925](c4c1925)) * **email-change:** ensure success and error messages persist after redirect ([#3913](#3913)) ([caf82a5](caf82a5)) * **email-change:** improve messaging for in-progress or expired change requests ([#3886](#3886)) ([02d2ea0](02d2ea0)) * **email-change:** typo in variable name ([#3941](#3941)) ([941dc21](941dc21)) * **google-login:** handle google oauth disabled state in the editor ([#3946](#3946)) ([0f9f7c6](0f9f7c6)) * hide campaigns menu when the Newspack Campaigns plugin is not activated ([#3922](#3922)) ([adcc21f](adcc21f)) * make front end not dependent on coauthors plus ([#3905](#3905)) ([dc96e5b](dc96e5b)) * **otp-input:** enhance OTP input handling for clipboard ([#3898](#3898)) ([a56328b](a56328b)) * reinstate the Add New Newsletter link in the admin menu ([#3926](#3926)) ([1c8c7d7](1c8c7d7)) * remove extra space above empty help text ([#3904](#3904)) ([6a4fe4f](6a4fe4f)) * remove import and route for Suppression ([#3894](#3894)) ([a2034e7](a2034e7)) * **setup-wizard:** prevent Yoast redirect ([#3940](#3940)) ([3461b5f](3461b5f)) ### Features * **auth:** OTP autocomplete integration ([#3888](#3888)) ([5a1d7a8](5a1d7a8)) * **bylines:** get post byline authors ([#3911](#3911)) ([17942a2](17942a2)) * **bylines:** useAuthorTokens() hook with user entity validation ([#3907](#3907)) ([3d1feee](3d1feee)) * **email-change:** allow old email to cancel email change only, not confirm ([#3912](#3912)) ([92413e3](92413e3)) * **ga4:** np_newsletter_subscribed event upon front-end signup ([#3938](#3938)) ([2295277](2295277)) * **ras-newsletter:** Newsletters list progressive disclosure ([#3887](#3887)) ([53f4eed](53f4eed)) * **reader-auth:** send WP login reminder email to non-reader accounts ([#3796](#3796)) ([d1af25e](d1af25e)), closes [#3823](#3823) * **scss:** export colors as module for JS consumption ([#3910](#3910)) ([81da8f0](81da8f0)) * **segments:** add filter for device segment ([#3880](#3880)) ([d465726](d465726)) * update colors and add all design system variables ([#3882](#3882)) ([6ee8e30](6ee8e30))

matticbot · 2025-04-23T17:57:04Z

🎉 This PR is included in version 6.5.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.6.0-alpha.1](v6.5.0...v6.6.0-alpha.1) (2025-05-08) ### Bug Fixes * add white background to Newspack admin screens ([#3909](#3909)) ([4c8409e](4c8409e)) * allow guest contributors to have empty archives ([#3902](#3902)) ([af8bed9](af8bed9)) * **analytics:** migrate back-end GA4 events to front-end ([#3895](#3895)) ([7e18628](7e18628)) * **auth-form:** check user before is_user_reader() call ([#3944](#3944)) ([1cbb760](1cbb760)) * avoid warning for network event ([#3942](#3942)) ([60d0aa3](60d0aa3)) * **bylines:** avoid rerendering of editable area ([#3896](#3896)) ([9fdf659](9fdf659)) * **bylines:** custom edited state for modal ([#3919](#3919)) ([2a1a800](2a1a800)) * **bylines:** get CAP data from the plugin's store ([#3906](#3906)) ([0745113](0745113)) * **corrections:** Limit CPT to posts only ([#3927](#3927)) ([1d49c39](1d49c39)) * **corrections:** Use Corrections Archive template by default ([#3929](#3929)) ([c4c1925](c4c1925)) * **email-change:** ensure success and error messages persist after redirect ([#3913](#3913)) ([caf82a5](caf82a5)) * **email-change:** improve messaging for in-progress or expired change requests ([#3886](#3886)) ([02d2ea0](02d2ea0)) * **email-change:** typo in variable name ([#3941](#3941)) ([941dc21](941dc21)) * **ga4:** ensure gate_post_id and newspack_popup_id are passed to activities ([#3956](#3956)) ([fadaa4d](fadaa4d)) * **google-login:** handle google oauth disabled state in the editor ([#3946](#3946)) ([0f9f7c6](0f9f7c6)) * hide campaigns menu when the Newspack Campaigns plugin is not activated ([#3922](#3922)) ([adcc21f](adcc21f)) * make front end not dependent on coauthors plus ([#3905](#3905)) ([dc96e5b](dc96e5b)) * **newsletters-wizard:** remove advertisers menu item ([#3948](#3948)) ([2fddbd6](2fddbd6)) * **otp-input:** enhance OTP input handling for clipboard ([#3898](#3898)) ([a56328b](a56328b)) * reinstate the Add New Newsletter link in the admin menu ([#3926](#3926)) ([1c8c7d7](1c8c7d7)) * remove extra space above empty help text ([#3904](#3904)) ([6a4fe4f](6a4fe4f)) * remove import and route for Suppression ([#3894](#3894)) ([a2034e7](a2034e7)) * **setup-wizard:** prevent Yoast redirect ([#3940](#3940)) ([3461b5f](3461b5f)) ### Features * **auth:** OTP autocomplete integration ([#3888](#3888)) ([5a1d7a8](5a1d7a8)) * **bylines:** get post byline authors ([#3911](#3911)) ([17942a2](17942a2)) * **bylines:** useAuthorTokens() hook with user entity validation ([#3907](#3907)) ([3d1feee](3d1feee)) * **email-change:** allow old email to cancel email change only, not confirm ([#3912](#3912)) ([92413e3](92413e3)) * **ga4:** np_newsletter_subscribed event upon front-end signup ([#3938](#3938)) ([2295277](2295277)) * **ras-newsletter:** Newsletters list progressive disclosure ([#3887](#3887)) ([53f4eed](53f4eed)) * **reader-auth:** send WP login reminder email to non-reader accounts ([#3796](#3796)) ([d1af25e](d1af25e)), closes [#3823](#3823) * **scss:** export colors as module for JS consumption ([#3910](#3910)) ([81da8f0](81da8f0)) * **segments:** add filter for device segment ([#3880](#3880)) ([d465726](d465726)) * update colors and add all design system variables ([#3882](#3882)) ([6ee8e30](6ee8e30))

matticbot · 2025-05-08T17:12:22Z

🎉 This PR is included in version 6.6.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.6.0](v6.5.1...v6.6.0) (2025-05-14) ### Bug Fixes * add white background to Newspack admin screens ([#3909](#3909)) ([4c8409e](4c8409e)) * allow guest contributors to have empty archives ([#3902](#3902)) ([af8bed9](af8bed9)) * **analytics:** migrate back-end GA4 events to front-end ([#3895](#3895)) ([7e18628](7e18628)) * **auth-form:** check user before is_user_reader() call ([#3944](#3944)) ([1cbb760](1cbb760)) * avoid warning for network event ([#3942](#3942)) ([60d0aa3](60d0aa3)) * **bylines:** avoid rerendering of editable area ([#3896](#3896)) ([9fdf659](9fdf659)) * **bylines:** custom edited state for modal ([#3919](#3919)) ([2a1a800](2a1a800)) * **bylines:** get CAP data from the plugin's store ([#3906](#3906)) ([0745113](0745113)) * **corrections:** Limit CPT to posts only ([#3927](#3927)) ([1d49c39](1d49c39)) * **corrections:** Use Corrections Archive template by default ([#3929](#3929)) ([c4c1925](c4c1925)) * **email-change:** ensure success and error messages persist after redirect ([#3913](#3913)) ([caf82a5](caf82a5)) * **email-change:** improve messaging for in-progress or expired change requests ([#3886](#3886)) ([02d2ea0](02d2ea0)) * **email-change:** typo in variable name ([#3941](#3941)) ([941dc21](941dc21)) * **ga4:** ensure gate_post_id and newspack_popup_id are passed to activities ([#3956](#3956)) ([fadaa4d](fadaa4d)) * **google-login:** handle google oauth disabled state in the editor ([#3946](#3946)) ([0f9f7c6](0f9f7c6)) * hide campaigns menu when the Newspack Campaigns plugin is not activated ([#3922](#3922)) ([adcc21f](adcc21f)) * make front end not dependent on coauthors plus ([#3905](#3905)) ([dc96e5b](dc96e5b)) * **newsletters-wizard:** remove advertisers menu item ([#3948](#3948)) ([2fddbd6](2fddbd6)) * **otp-input:** enhance OTP input handling for clipboard ([#3898](#3898)) ([a56328b](a56328b)) * reinstate the Add New Newsletter link in the admin menu ([#3926](#3926)) ([1c8c7d7](1c8c7d7)) * remove extra space above empty help text ([#3904](#3904)) ([6a4fe4f](6a4fe4f)) * remove import and route for Suppression ([#3894](#3894)) ([a2034e7](a2034e7)) * **setup-wizard:** prevent Yoast redirect ([#3940](#3940)) ([3461b5f](3461b5f)) ### Features * **auth:** OTP autocomplete integration ([#3888](#3888)) ([5a1d7a8](5a1d7a8)) * **bylines:** get post byline authors ([#3911](#3911)) ([17942a2](17942a2)) * **bylines:** useAuthorTokens() hook with user entity validation ([#3907](#3907)) ([3d1feee](3d1feee)) * **email-change:** allow old email to cancel email change only, not confirm ([#3912](#3912)) ([92413e3](92413e3)) * **email-change:** remove env constant requirement ([#3943](#3943)) ([f04e58f](f04e58f)) * **ga4:** np_newsletter_subscribed event upon front-end signup ([#3938](#3938)) ([2295277](2295277)) * **ras-newsletter:** Newsletters list progressive disclosure ([#3887](#3887)) ([53f4eed](53f4eed)) * **reader-auth:** send WP login reminder email to non-reader accounts ([#3796](#3796)) ([d1af25e](d1af25e)), closes [#3823](#3823) * **scss:** export colors as module for JS consumption ([#3910](#3910)) ([81da8f0](81da8f0)) * **segments:** add filter for device segment ([#3880](#3880)) ([d465726](d465726)) * update colors and add all design system variables ([#3882](#3882)) ([6ee8e30](6ee8e30))

matticbot · 2025-05-14T17:30:33Z

🎉 This PR is included in version 6.6.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

fix(otp-input): enhance OTP input handling and validation logic for c…

060d335

…hrome

AKSHAT2802 marked this pull request as ready for review April 8, 2025 11:55

AKSHAT2802 requested a review from a team as a code owner April 8, 2025 11:55

AKSHAT2802 requested a review from miguelpeixe April 8, 2025 12:08

AKSHAT2802 added 2 commits April 8, 2025 18:21

fix(otp-input): improve formatting and readability code

e9b667e

fix(otp-input): improve code readability

9e05819

miguelpeixe requested changes Apr 8, 2025

View reviewed changes

miguelpeixe approved these changes Apr 14, 2025

View reviewed changes

miguelpeixe merged commit a56328b into trunk Apr 14, 2025

miguelpeixe deleted the feat/otp-email-autocomplete-functionality branch April 14, 2025 18:29

github-actions Bot added [Status] Approved The pull request has been reviewed and is ready to merge needs-changelog labels Apr 14, 2025

matticbot added the released on @alpha label Apr 23, 2025

leogermani removed the needs-changelog label Apr 25, 2025

matticbot added the released label May 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(otp-input): enhance OTP input handling for clipboard#3898

fix(otp-input): enhance OTP input handling for clipboard#3898
miguelpeixe merged 3 commits into
trunkfrom
feat/otp-email-autocomplete-functionality

AKSHAT2802 commented Apr 8, 2025 •

edited

Loading

Uh oh!

AKSHAT2802 commented Apr 8, 2025

Uh oh!

miguelpeixe left a comment

Uh oh!

AKSHAT2802 commented Apr 9, 2025

Uh oh!

miguelpeixe commented Apr 9, 2025

Uh oh!

AKSHAT2802 commented Apr 10, 2025 •

edited

Loading

Uh oh!

miguelpeixe commented Apr 10, 2025

Uh oh!

AKSHAT2802 commented Apr 11, 2025

Uh oh!

miguelpeixe left a comment

Uh oh!

github-actions Bot commented Apr 14, 2025

Uh oh!

matticbot commented Apr 23, 2025

Uh oh!

matticbot commented May 8, 2025

Uh oh!

matticbot commented May 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

AKSHAT2802 commented Apr 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Uh oh!

AKSHAT2802 commented Apr 8, 2025

Uh oh!

miguelpeixe left a comment

Choose a reason for hiding this comment

Uh oh!

AKSHAT2802 commented Apr 9, 2025

Uh oh!

miguelpeixe commented Apr 9, 2025

Uh oh!

AKSHAT2802 commented Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

miguelpeixe commented Apr 10, 2025

Uh oh!

AKSHAT2802 commented Apr 11, 2025

Uh oh!

miguelpeixe left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 14, 2025

Uh oh!

matticbot commented Apr 23, 2025

Uh oh!

matticbot commented May 8, 2025

Uh oh!

matticbot commented May 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

AKSHAT2802 commented Apr 8, 2025 •

edited

Loading

AKSHAT2802 commented Apr 10, 2025 •

edited

Loading