Issues with pasting SMS and TOTP codes into input fields

[NipuniBhagya]

Description

Currently, when users try to paste SMS or TOTP codes into the authentication pages using the clipboard option, only one character is entered. As a result, users have to enter the code one character at a time manually. The following are all the scenarios related to this issue.

Steps to Reproduce

1. Configure SMS or TOTP flow
2. Try out the above scenario during login flow.

Please select the area issue is related to

Authentication & Registration

Version

7.2.0-m6

Environment Details (with versions)

No response

Developer Checklist

• [Behavioural Change] Does this change introduce a behavioral change to the product?
•  ↳ Approved by team lead
•  ↳ Label impact/behavioral-change added
• [Migration Impact] Does this change have a migration impact?
•  ↳ Migration label added (e.g., 7.2.0-migration)
•  ↳ Migration issues created and linked
• [New Configuration] Does this change introduce a new configuration?
•  ↳ Label config added
•  ↳ Configuration is properly documented

[JayaShakthi97]

Following is an improvement suggestion I have suggested via a separate issue;

The current UI(6 input boxes) is implemented as separate input boxes. https://github.com/wso2/identity-apps/blob/f4d3299d501fd5463aaac5ff856c56cdc68d2b87/identity-apps-core/apps/authentication-portal/src/main/webapp/totp.jsp#L212

Implementing this as a single input field will provide the following benefits.

1. Should be able to implement SMS OTP autofill by utilizing autocomplete="one-time-code" Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#one-time-code
2. Better Accessibility - screen readers
3. Can avoid buggy behaviors like the following
   1. Issues with clearing and re-entering values.
   2. Issue with pasting values.

The single field can be rendered as multiple input boxes by writing some CSS. Ref: https://dev.to/madsstoumann/using-a-single-input-for-one-time-code-352l