40818419 / react-code-input Goto Github PK

Currently the value prop only sets the initial value. However, I would like value to instead behave like it would for a standard input field, where changes in the value prop would be reflected in the display.
In this manner it would be behaving similar to a standard React controlled component https://reactjs.org/docs/forms.html#controlled-components

Case: paste code with space at the end of the string
1234
all string pasted in first input.
It is look like this:

or this:

For my number inputs on mobile I'd like to be able to suggest to browsers to display the large numeric keyboard. To do this the input fields should have the following attributes: pattern="[0-9]*" inputmode="numeric"

Adding those automatically for type="number" fits my use case, but seems like too much of a breaking change for others. So it be nice if we could just pass these as additional props which get passed onto the input fields.

more info:
https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

If I use dynamic import it works but when I add prop like onChange, style, inputStyle it happens again.

import dynamic from 'next/dynamic'
const ReactCodeInput = dynamic(import('react-code-input'))

...
<ReactCodeInput
  type="number"
  fields={5}
  onChange={e => console.log('xxx', e.target.value)}
  style={{ display: 'grid' }}
  inputStyle={{}}
/>
...

Note: and it also happen whenever I refresh the browser :/

Originally posted by @Lurtt in #66 (comment)

Hi. I have 1 question - haven't found decision. Can i use single input for several chars?
My task - i have code (6 integers). And i need use 3 code inputs - 2 chars on 1 input.

Hi could you help me, How can I declare the types for react-code-input

Right now pasting PINs works but, for example, pasting a four digit PIN into the first text input of a four digit input results in the second digit's input being focused. Ideally focus would move to the first empty input after the pasted content, or if all the inputs are filled out, the last one.

Description

• When input type is number, pressing dash (-) populates the field.
• Same behavior happens with dots .
• The reason is basically that HTML input type number allows for dots and dashes, however, I don't think it's useful in this component (people accidentally press - instead of 0 sometimes).

Expected behavior

• - should not be valid to enter

Preview

Extra info

Version: "react-code-input": "^3.2.0",

Happy to open a PR!

If you have more than one ReactCodeInput on a page the input elements will wind up with duplicate IDs. If type is password then Chrome (Version 66.0.3359.181 here) will actually complain with something like [DOM] Found 2 elements with non-unique id #0: (More info: https://goo.gl/9p2vKq) .

Does it make sense to add an idPrefix prop or similar to avoid this? I'd be glad to submit a PR if that sounds like a decent solution.

TypeError: Object doesn't support property or method 'from'
   {
      [functions]: ,
      proto: { },
      description: "Object doesn't support property or method 'from'",
      message: "Object doesn't support property or method 'from'",
      name: "TypeError",
      number: -2146827850,
      stack: "TypeError: Object doesn't support property or method 'from'
   at r ...

I suppose that the issue in this line:

https://github.com/40818419/react-code-input/blob/master/lib/ReactCodeInput.js#L59

Generated uuid/v4 id makes it impossible to use snapshot testing, I suggest to replace
{this.uuid}+[incrementedCount] call in id of inputs to optional name prop like {[this.name]-[incrementedCount]}

Hello, I'd like to see a way to be able to force all the characters to appear as uppercase. I have a PR ready that adds a new prop called 'forceUppercase: boolean' that just changes the input on handleOnChange to be uppercase. Do you find this useful? I would need it for my application.

Hi,

I had some troubles trying to use the component as controlled. My use case is quite simple : I want to use the component on mobile and to only allow numbers to be entered by using a 'numeric' dynamic keyboard. After trying all mixes of type, inputMode and pattern. I finally realized that no one would work (here is a demo) for a number password and that the correct combination to implement this would be to put type="tel" (to properly display a keyboard with only numbers) and to use a class to set -webkit-text-security: disc in order to hide the password.

But then, the resulting HTML will no longer filter key for the numeric constraint.
I decided to handle it myself by filtering code on change by simply calling an HOC when the code matches [0-9]* regex. The problem is that the component finally ignore the value passed in props but uses its local state. Then value prop and local state goes out of sync.

I think this is falling in the anti-patterns that React team describe in this blog post:
https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#anti-pattern-unconditionally-copying-props-to-state

Description

• input type number allows for text input in Safari and Firefox

Expected behavior

• When input type is number user should not be able to add text

Preview

Extra info

Version: "react-code-input": "^3.5.0",

Is there any way to add a placeholder (ex: "-") for the input fields?

Trying to start inputting a number in the last cell changes the next focused cell to the second cell and unpredictable behavior happens.

Do we have the ability to clear all inputs?
I want to clear all inputs when user enter wrong OTP.

Thanks

For my use case, I wanted to have the component become disabled when the user has reached the maximum number of fields (in handlePinInputChange when length === 6, pinComplete in state is updated from false to true).

If this is used in conjunction with inputStyle, an error is thrown in the client:

The code works fine when inputStyle is not used. I believe the solution would be to allow inputStyle to have styles added on (incorporating a spread operator to adding the styles).

lib/ string
}(window, function(__WEBPACK_EXTERNAL_MODULE_61__) {

Error

ReferenceError: window is not defined
    at Object../node_modules/react-code-input/lib/ReactCodeInput.js

Use same style and props like here:

Chrome 64.

When type='number' an Up Arrow key press causes a 1 to appear in the field and focus advances to the next field. When the Down Arrow key is pressed a 0 is entered.

paste into first field shall parse text and spread it over other fields

Looks like react and reace-dom is not only a dependency but also a peer dependency. This can cause issues for those using mono repo workflows such as lerna or yarn workspaces..

Should remove the dependencies and place them in devDependencies

I am new to react.
when type = password need to remove by default text "test" appear and don't know how to remove it.

Please help on this.

use puppeteer + jest

Description

When trying to use the package with NextJS and SSR, none of the pages load and we receive the following error:

{ TypeError: Cannot read property 'href' of undefined at getURL (/component
library/node_modules/next/dist/lib/utils.js:155:30) at new Router (/component
library/node_modules/next/dist/lib/router/router.js:101:29) at _callee3$ (/component
library/node_modules/next/dist/server/render.js:235:22) at tryCatch (/component
library/node_modules/regenerator-runtime/runtime.js:62:40) at Generator.invoke [as _invoke (/component-library/node_modules/regenerator-runtime/runtime.js:296:22) at Generator.prototype
(anonymous function) [as next] (/component-library/node_modules/regenerator
runtime/runtime.js:114:21) at step (/component
library/node_modules/@babel/runtime/helpers/asyncToGenerator.js:12:30) at _next (/component
library/node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:9) at <anonymous>
sourceMapsApplied: true }

Expected Behavior

Should be able to import the package into NextJS and utilize it without this error.

Extra info

Version: "react-code-input": "3.7.0",

We're working on transitioning to React 16, and this is our last remaining package that still requires React 15 :)

Do you know of anything significant that blocks updating? I'm happy to submit a pull request if you'd like.

Hi, I would like to use this cool component but I am getting same error as in #63
It happen everytime I import the component..

using "react-code-input": "^3.8.0"

TypeError: Cannot read property 'href' of undefined
    at getURL (/Users/lukas/Repositories/xxx/node_modules/next/dist/lib/utils.js:130:30)
    at new Router (/Users/lukas/Repositories/xxx/node_modules/next/dist/lib/router/router.js:139:29)
    at _callee3$ (/Users/lukas/Repositories/xxx/node_modules/next/dist/server/render.js:256:22)
    at tryCatch (/Users/lukas/Repositories/xxx/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/lukas/Repositories/xxx/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/lukas/Repositories/xxx/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/Users/lukas/Repositories/xxx/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5:24)
    at _next (/Users/lukas/Repositories/xxx/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:27:9)
    at <anonymous>

hi,
when typing in safari , it will turn off keyboard after inputed each slot.

please help

Cannot find module '/Users/digit/Sites/react-code-input/node_modules/react-hot-api/modules/index.js' from '/Users/rdewsbury/iogc3/server/node_modules/react-code-input/lib'

Should /Users/digit/Sites be hardcoded in here?

if already fill the input, and then type with same number, the focus will not change to the next input until i type it again

Hi and thanks for your great component!

I would need to set the font color to black when the code-input is disabled.
Could you add something like inputStyleDisabled?

Hi,

It seems to me that autoFocus prop sets incorrect state.
Indeed, here you set autoFocus="autofocus" if autofocus prop is set, autofocus="" otherwise.
However, in HTML 5, the presence of the attribute acts as a boolean, then both autoFocus="autofocus" and autoFocus="" has the same signification (see this Stack Overflow question).

On another hand, as specified in the MDN, autofocus is not a good practice for accessibility, then maybe it would be a better choice to set this attribute default to false ?

switch from bluekit to storybook

First of all, Really Amazing work 🚀

Description

• When input type is number, pasting dash (12-2) populates the a single field with 12-2.
• Same behavior happens with dots .
• Pasting any forbidden keyCodes work and clutters up one input field
• Related to: #27

Expected behavior

• - should not be valid to enter

Preview

Discussion

• So, This is related to #27 I just revisted the project today and say the fixes, Thanks and sorry I was away! 🚀
• Pasting does not call the onKeyDown event, which of course would result in allowing a user to paste anything, also when a forbidden character is pasted in numeric mode, a single field is cluttered up.
• I first targeted this by trying to add add a paste handler, I handled the logic and ui and everything, but then I ran into the following problem: the paste handler has access to the full text, and there's no easy way to convert from keyCode to char code consistently across browsers. (Tried this not to add a new prop)
• To circumvent the afore mentioned problem I simply added a new Prop filterChars, it was the only way I found to handle filtering characters when a user pastes smth

Extra info

Version: "react-code-input": "^3.5.0",

Here's the PR! #42

Hi !

What would you think about adding a focus() method on the component that would focus the first input. As you are already keeping track of each input ref, I think it would be as simple as :

focus() {
	this.textInput[0].focus()
}

My use case is that I use this component as a confidential code input and then I have 2 <ReactCodeInput />. When the first component is filled I would be able to automatically focus the confirmation one. A focus method would allow to do this easily.

I can make a PR if needed.

Can we set DELETE_KEY have same function of the BACKSPACE_KEY?

Visit the live demo using an android device.

Not sure there is a fix for this. I encountered the same problem while writing my own code. The problem lies in that backspace can either change or not change the input value.

No problems on iOS or desktop, just android.

I upgraded to latest version and I can still enter char e in the input field.

I'm trying to find a way to submit a form on Enter key press in last digit input.
Unfortunately cannot figure out how to achieve this because none of the following work: onKeyPress, onKeyUp, onKeyDown.
Is there a solution for that?