leonardodino / rci

🔢 better code inputs for react/web

rci ^{_{"react code input"}}

better segmented code inputs for the web. primary goals:

• improved accessibility
• operating system integration
• consistent, cross-platform, experience

Compared

regular input	multi-input	rci

rci uses a single DOM input element, overlayed on top of plain divs for styling. most other implementations of this pattern are based on multiple inputs.

using multiple inputs gives out-of-the-box style consistency, but comes with the disadvantage of JavaScript hacks to deal with focus shifting and pasting, and accessibility issues.

using a single input (rci approach) allows for:

• native keyboard shortcuts and selection (including selecting multiple segments)
• ✨autocomplete magic:sparkles:
• improved accessibility (<label>, tabIndex, minLength/maxLength, etc)

Demo

https://rci.netlify.app (code here, uses tailwind)

(for vanilla css, see the codesandbox. a nice starter for CSS Modules usage)

Packages

This repository hosts a few npm packages, the most relevant ones being:

• use-code-input: low-level hook handling selection via ref
• rci: opinionated component (CodeInput) built on top of use-code-input

most users will be better served by using rci, as the internals of this component won't vary much from app to app.

the hook package is intended for usage only in design system projects which wish to retain absolute control of rendered DOM elements.

Styling

packages in this repo don't bundle any built-in style, besides the base minimum for it to function (zIndex, positioning, etc).

for styling all elements rendered by CodeInput have a dedicated className prop:

• className
• inputClassName
• scrollWrapperClassName
• segmentWrapperClassName

Bundle size

despite not being part of the primary goals, weight is heavily considered while developing.

package	size
rci
use-code-input
use-is-focused

Caveats

there's currently no support for displaying separators between sequences (example: ___-___).

for simplicity of implementation and to reduce the amount of CSS the user needs to provide, this component assumes a font with fixed advances for the characters accepted. this means using a monospaced or tabular lining font for numeric values. for alphanumeric values the font must be monospaced.

this project is still pending a thorough a11y validation. for cases in which accessibility is paramount, please use a simple native single input.

rci's Issues

react/jsx-runtime.js error nextjs

Getting the following error on nextjs v12.0.8

Error [ERR_MODULE_NOT_FOUND]: Cannot find module
 'node_modules/react/jsx-runtime' imported from node_modules/rci/dist/esm/index.js
Did you mean to import react/jsx-runtime.js?

Seems to be related to nextjs setting "jsx": "preserve" in tsconfig?

We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.

The following mandatory changes were made to your tsconfig.json:

        - jsx was set to preserve (next.js implements its own optimized jsx transform)

Throws an error while typing

Hello. I use this package with NextJS nad after update 0.0.3 i receive this error

After rollback message left

Still maintained?

Would have rather commented as a discussion but there isnt any ability to do so.

This looks great for OTP but is it still maintained?

Or if not then is there a fork that is maintained? Thanks

First input is not focused after error, in chrome

In the example sandbox, when using firefox or safari, if an invalid code is entered, after the error animation, the first field appears focused.

However, using chrome (Brave, actually), the first field is able to be typed into, but the border does not appear around the first box, it looks like this, even though the input is focused:

When logging the arguments to renderSegment, the final set is:

{index: 0, state: null, position: -1, selection: Array(2)}
{index: 1, state: null, position: -1, selection: Array(2)}
{index: 2, state: null, position: -1, selection: Array(2)}
{index: 3, state: null, position: -1, selection: Array(2)}
{index: 4, state: null, position: -1, selection: Array(2)}
{index: 5, state: null, position: -1, selection: Array(2)}

Whereas in firefox, the final set includes a cursor:

{index: 0, state: "cursor", position: 1, selection: Array(2)}
{index: 1, state: null, position: 1, selection: Array(2)}
{index: 2, state: null, position: 1, selection: Array(2)}
{index: 3, state: null, position: 1, selection: Array(2)}
{index: 4, state: null, position: 1, selection: Array(2)}
{index: 5, state: null, position: 1, selection: Array(2)}

I'm trying to figure out why this is, but wanted to open an issue in case you might know what's going on.

Cannot run `yarn install`

I cloned the repo, and ran yarn to install dependencies, but I get this error message:

▶ yarn
rci/.yarn/releases/yarn-berry.cjs:1
version https://git-lfs.github.com/spec/v1
        ^^^^^

SyntaxError: Unexpected identifier
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1025:15)
    at Module._compile (node:internal/modules/cjs/loader:1059:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:79:12)
    at node:internal/main/run_main_module:17:47

The file, which claims to be a .cjs file, is actually just:

version https://git-lfs.github.com/spec/v1
oid sha256:57ec2d26a54c312a1848599265be6aba0e2e5f734eaba3fcd4c491429fefa21f
size 1980728

This is ✨superb ✨

Thank you for putting in the effort to make a TOTP input that follows best practices & looks fancy!

I'd love to contribute and try to ensure that it's accessible!

Keyboard does not re-open on focus after tapping 'Done' on keyboard in Chrome on iOS

Hey there,

Firstly, thanks for creating this component - I really appreciate the goal with it.

We've just encountered an unusual issue when this component is used in Chrome on iOS.

When the input is focused for the first time, the keyboard appears. Tapping the 'Done' button on the iOS keyboard results in the keyboard closing and the field is becoming unfocused (as expected), although tapping the field again shows the field as being focused but does not re-open the keyboard.

Here's a video showing what happens after tapping 'Done':
https://github.com/leonardodino/rci/assets/18431950/e2b816bc-fc29-4267-99e8-b109a1686e7d

This is particularly unusual because if the same steps are repeated, but instead of tapping 'Done', I just tap outside of the keyboard to close it, then the keyboard re-opens fine the second time.

Here's a video of it working correctly when tapping away from the keyboard:
https://github.com/leonardodino/rci/assets/18431950/b8440fda-7402-4fab-9955-081833d6c4d2

We discovered this issue in our own app but I've tested it again using the code sandbox example provided and the issue is reproducible there.

We've tested it out on two separate iPhones, one using iOS version 15.5 and the other on 16.5.1, both running Chrome version 115.0.5790.130 for iOS, and the issue is occurring on both.

Let me know if you need any further info!

Cheers.

Controlled input props isn't supported / doesn't work as expected

CodeSandbox reproduction here: https://codesandbox.io/s/rci-codeinput-forked-e4qg3z

Expected

Supplying a value: state prop and an onChange: setState prop to CodeInput should yield similar results to regular controlled inputs in React.

Instead

Currently the input’s onChange doesn't fire if value is also supplied, and there is a flash of the next input value before it gets reset to its initial state.

Suggestion

Maybe an acceptable patch while investigating the issue would be to omit value from accepted props and not pass it to the underlying input.

I notice in the example the input’s value iscontrolled using the onChange event’s currentTarget instead of the usual React way — maybe RCI.Input needs to wrap value and onChange props in something that works with inputRef.

Problem with Vite.js

Hello, thanks a lot for the library =)
There is a problem when using vite.js(https://vitejs.dev/) ssr mode
As I understand it, because in the package.json type: 'module' vite looks into the 'main' section and sees the file for cjs there

2022-07-07T13:46:48.002Z level="error"	msg="ReferenceError: exports is not defined in ES module scope
 This file is being treated as an ES module because it has a '.js' file extension and '/Users/consegrado/Work/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/rci/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

Underlying input width

Hey, first off thank you so much for the library - I appreciate how much effort has gone into the a11y complexities of this design pattern.

Currently the underlying <input> has an inline style with width: 200% - and this is not overridable with the inputStyle class as it's defined after the spread of inputStyle.

I noticed that when using a password manager like 1Password, it causes the little 1Password icon to appear quite far off where the dummy input appears visually:

I can override the input width by smacking a !important on my own defined class e.g. width: 120% !important, but before I commit to this solution do I risk breaking something that I'm not aware of? It seems okay so far, but just want to double check.

Cheers!

`autoFocus={true}` seems to not be added to the input element

As you can see in

I edited the example to set <Example id={a11yId} expected={expected} autoFocus={true}/> but there is no autofocus attribute on the input on load.

Avoiding non-numeric input

Hi there!

I see in your codesandbox (also, thanks for that, it's been very helpful!) that you're using an onChange to detect non 0-9 characters and remove them. This results in a bit of a flicker sometimes, as the value is cleared out.

Is there a reason that an onKeyDown couldn't be used instead, to avoid those characters from even being set in the first place?

I suppose that the onChange would still be necessary to handle pastes...