leonardodino / rci Goto Github PK
View Code? Open in Web Editor NEW🔢 better code inputs for react/web
Home Page: https://rci.netlify.app
License: MIT License
🔢 better code inputs for react/web
Home Page: https://rci.netlify.app
License: MIT License
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
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!
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.
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
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)
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.
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!
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...
CodeSandbox reproduction here: https://codesandbox.io/s/rci-codeinput-forked-e4qg3z
Supplying a value: state
prop and an onChange: setState
prop to CodeInput
should yield similar results to regular controlled inputs in React.
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.
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
.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.