[base-ui][Input] Add OTP input demo #40539

sai6855 · 2024-01-11T12:50:44Z

Demo: https://deploy-preview-40539--material-ui.netlify.app/base-ui/react-input/#otp-input

looking at downloads of https://www.npmjs.com/package/react-otp-input and considering its applicability in various everyday scenarios, I believe this component warrants inclusion as the demo.

few Inspiration/ benchmarks:

https://github.com/devfolioco/react-otp-input
https://github.com/shubhanus/otp-input-react
I have followed (at least) the PR section of the contributing guide.

mui-bot · 2024-01-11T12:53:22Z

Netlify deploy preview

docs/data/base/components/input/input.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 0da0fb5

zanivan

This is great! Design-wise looks good :)

marcpachecog · 2024-01-12T13:58:50Z

@sai6855 @michaldudak @zanivan, I believe it would be fantastic to introduce an additional base-ui hook specifically designed for handling OTP inputs. Chakra already offers a PinInput component along with a headless UI hook in their zag library (https://zagjs.com/components/react/pin-input).

DiegoAndai · 2024-01-16T12:31:30Z

@marcpachecog that sounds like a good idea. Could you please open a feature request issue for it? 😊

marcpachecog · 2024-01-16T13:37:26Z

@DiegoAndai Done! mui/base-ui#75

michaldudak · 2024-01-16T14:15:25Z

Great idea! I have a couple of remarks regarding functionality:

pressing Left Arrow when the cursor is in the filled first input should not deselect its content (unless entering another digit will replace the old value)
how do you get the value from the component?
each input could have a label saying which digit/character it corresponds to, so it's announced by screen readers
nice to have: if we paste a whole value, all the inputs should be updated

sai6855 · 2024-01-16T17:00:10Z

pressing Left Arrow when the cursor is in the filled first input should not deselect its content (unless entering another digit will replace the old value)

fixed in 23ee497

how do you get the value from the component?

fixed in 51965ca

each input could have a label saying which digit/character it corresponds to, so it's announced by screen readers

fixed in d67da7c

nice to have: if we paste a whole value, all the inputs should be updated

fixed in b8b382f

michaldudak · 2024-01-17T08:07:02Z

docs/data/base/components/input/OTPInput.js

+
+  const handleKeyDown = (event, currentIndex) => {
+    switch (event.key) {
+      case 'ArrowLeft':


Please handle ArrowUp the same way as ArrowLeft and ArrowDown the same way as ArrowRight

Both ArrowUp and ArrowLeft does nothing (not even deselection of input) in mentioned benchmarks . so i reflected same behaviour in bb2f3a8

michaldudak · 2024-01-17T08:08:59Z

docs/data/base/components/input/OTPInput.js

+import { Input as BaseInput } from '@mui/base/Input';
+import { Box, styled } from '@mui/system';
+
+function OTP({ seperator, inputCount, otp, setOtp }) {


otp and setOpt are not really a standard way of providing a value. Could you change it to value and onChange?

fixed here 7c6a232

michaldudak · 2024-01-17T08:13:49Z

docs/data/base/components/input/OTPInput.js

+    selectInput(currentIndex);
+  };
+
+  const handlePaste = (event, currentIndex) => {


This works great! I'm wondering if pasting in any of the digits shouldn't replace the whole value, though (so if your value is [9][9][9][9][9], have a cursor in the third input and have 12345 in the clipboard, the component should display [1][2][3][4][5] instead of [9][9][1][2][3]), but I'm not 100% sure about that.

Both mentioned benchmarks displays [9][9][1][2][3] on pasting. so i reflected same behaviour.

michaldudak · 2024-01-17T08:14:23Z

docs/data/base/components/input/OTPInput.js

+        setOtp={setOtp}
+        inputCount={inputCount}
+      />
+    </Box>


Could we display the entered code as plain text below the OTP component?

fixed here 50c9913

michaldudak · 2024-01-17T10:50:41Z

docs/data/base/components/input/OTPInput.tsx

+
+export default function OTPInput() {
+  const inputCount = 5;
+  const [otp, setOtp] = React.useState<string[]>(new Array(inputCount).fill(''));


Having just a string here instead of an array would be more convenient. The value would usually be sent to server as a single string.

michaldudak · 2024-01-17T10:51:09Z

docs/data/base/components/input/OTPInput.tsx

+      }}
+    >
+      <OTP
+        seperator={<span>-</span>}


Typo:

Suggested change

seperator={<span>-</span>}

separator={<span>-</span>}

michaldudak · 2024-01-17T10:51:57Z

docs/data/base/components/input/OTPInput.tsx

+        seperator={<span>-</span>}
+        value={otp}
+        onChange={setOtp}
+        inputCount={inputCount}


length could be more intiutive (+ shorter)

since otp is string now, couldn't use otp.length

I meant the prop name

Opps sorry.. fixed in this commit 7dee93b

sai6855 · 2024-01-22T04:50:12Z

ping @michaldudak

michaldudak

Looks OK to me!

add demo

7b7c1f9

sai6855 marked this pull request as draft January 11, 2024 12:50

sai6855 added docs Improvements or additions to the documentation package: base-ui Specific to @mui/base component: input labels Jan 11, 2024

sai6855 added 8 commits January 11, 2024 19:56

Update width of OTPInput component

919930a

Refactor OTPInput component to remove CustomNumberInput

6176f7c

Fix arrow key navigation in OTPInput component

2c64947

Refactor OTPInput component to accept separator and inputCount as props

af79960

Refactor OTPInput component styling

20cb6ca

Add OTP Input demo to Input component

095dbd1

Refactor OTPInput component to use a reusable OTP component

539657d

Update OTPInput.js and OTPInput.tsx to add aria-label attribute

ab1a664

sai6855 marked this pull request as ready for review January 12, 2024 11:26

prettier

7d759fb

sai6855 requested review from DiegoAndai and zanivan January 12, 2024 11:42

zanivan added 2 commits January 12, 2024 10:06

Tiny visual tweak

b91d99e

More tweaks

6c2a8a5

zanivan approved these changes Jan 12, 2024

View reviewed changes

sai6855 and others added 3 commits January 12, 2024 21:35

Update OTPInput.tsx

da2757e

Update OTPInput.js

581f41b

prettier

82fb39f

DiegoAndai requested review from michaldudak and removed request for DiegoAndai January 16, 2024 12:32

sai6855 added 4 commits January 16, 2024 21:49

move otp state to parent

51965ca

Update aria-label for OTP input field

d67da7c

fix selction

23ee497

fill inputs on paste

b8b382f

michaldudak reviewed Jan 17, 2024

View reviewed changes

sai6855 added 5 commits January 17, 2024 14:17

handle arrow up, down

bb2f3a8

Add support for Delete key in OTPInput component

6f58502

change prop name to value and onChange

7c6a232

display entered value

50c9913

fix delete key usage

e2c30fe

sai6855 requested a review from michaldudak January 17, 2024 09:19

michaldudak reviewed Jan 17, 2024

View reviewed changes

sai6855 added 6 commits January 17, 2024 16:30

change inputCount to otp.length

12f808a

separator type

817bc3f

change otp type to string from array

45cd082

handle space button

c4c61d3

fix bugs

d1676f6

refactor

d4462af

sai6855 requested a review from michaldudak January 17, 2024 12:36

sai6855 added 2 commits January 18, 2024 11:16

change inputCount to length

7dee93b

pnpm prettier

0da0fb5

michaldudak approved these changes Jan 24, 2024

View reviewed changes

DiegoAndai merged commit 2d0d52c into mui:master Jan 29, 2024
19 checks passed

sai6855 deleted the otp-input branch January 29, 2024 13:21

mostafa-rio pushed a commit to mostafa-rio/material-ui that referenced this pull request Feb 3, 2024

[base-ui][Input] Add OTP input demo (mui#40539)

b85edef

oliviertassinari added the component: text field This is the name of the generic UI component, not the React module! label Nov 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[base-ui][Input] Add OTP input demo #40539

[base-ui][Input] Add OTP input demo #40539

sai6855 commented Jan 11, 2024 •

edited

Loading

mui-bot commented Jan 11, 2024 •

edited

Loading

zanivan left a comment

marcpachecog commented Jan 12, 2024

DiegoAndai commented Jan 16, 2024

marcpachecog commented Jan 16, 2024

michaldudak commented Jan 16, 2024

sai6855 commented Jan 16, 2024 •

edited

Loading

michaldudak Jan 17, 2024

sai6855 Jan 17, 2024

michaldudak Jan 17, 2024

sai6855 Jan 17, 2024

michaldudak Jan 17, 2024

sai6855 Jan 17, 2024

michaldudak Jan 17, 2024

sai6855 Jan 17, 2024

michaldudak Jan 17, 2024

sai6855 Jan 17, 2024

michaldudak Jan 17, 2024

michaldudak Jan 17, 2024

sai6855 Jan 17, 2024

michaldudak Jan 17, 2024

sai6855 Jan 18, 2024

sai6855 commented Jan 22, 2024

michaldudak left a comment

[base-ui][Input] Add OTP input demo #40539

[base-ui][Input] Add OTP input demo #40539

Conversation

sai6855 commented Jan 11, 2024 • edited Loading

mui-bot commented Jan 11, 2024 • edited Loading

Netlify deploy preview

Bundle size report

zanivan left a comment

Choose a reason for hiding this comment

marcpachecog commented Jan 12, 2024

DiegoAndai commented Jan 16, 2024

marcpachecog commented Jan 16, 2024

michaldudak commented Jan 16, 2024

sai6855 commented Jan 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sai6855 commented Jan 22, 2024

michaldudak left a comment

Choose a reason for hiding this comment

sai6855 commented Jan 11, 2024 •

edited

Loading

mui-bot commented Jan 11, 2024 •

edited

Loading

sai6855 commented Jan 16, 2024 •

edited

Loading