So, I've installed today this module in my React-JS project, and I'm confronting now with an issue. Not all the styles written in .pincode-input-text and .pincode-input-text:focus classes are applied. In rest, everything's working awesome...

Here's the code snippet of these 2 classes

.pincode-input-text {
    text-align: center;
    color: #fff;
    border-color: #f5f5f5;
    background-color: #070713;
    width: 50px;
    height: 50px;

    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    line-height: 1.5;
  }

  .pincode-input-text:focus {
    border-color: #fff;
    outline: none;
    box-shadow: none;
  }

And here's a screen from my inspection tool:

P.S. Yeah, I'm using SCSS, so I've done everything according to the pattern shown in Readme.md

I've been using this library in a project. I've been testing using Browserstack and I've run into issues on older browsers:

• The focus doesn't jump to the next input automatically
• onComplete never fires

I've seen this so far on:

• iphone 6 running safari 8
• windows 7 running IE 11
• Nokia Lumia 930 running windows phone 8.1
• HTC One M8 android 4.4

I'll dig into this further myself and report back. If you've got an ideas let me know!

Everytime I add a new package I get this error regarding the PinInput module. Anyone has got a clue about what could be happening?

It is difficult to tell what changed from previous release.

I can see 0.8.0 was introduced with "fixed security issues" commit but I don't see what the issue was and if the release contains other changes besides bumping some dependencies.

Is there any reason why there is not a placeholder attribute that we can set?

When i am typing to input it suggests me to autocomplete and then to save the password. It happens only if secret is true beacause of type="password"

Hi

I am not getting the keypad on the android devices if I set type="number". Please see image.

Cordova and ReactJS are used in this project that I am working on.

<PinInput
    length={4}
    secret
    type="numeric"
    ref={p => pin = p}
    onComplete={(value) => {
      props.onComplete(value)
      pin.clear()
    }}
  />

thx in advance

Hi,
Was trying to add manual values to pin Input but it's not taking the values.

Is there any to add values to the input field manually?

https://codesandbox.io/s/react-pin-input-forked-3mo8xm?file=/src/App.js

It would be great to be able to have access to methods through the api. I'd like to implement a custom keyboard for this.

Hello devs!
I was wondering how to set placeholders for every input, as the param "placehoder" doesn't exist.
Actually, I managed to do this with javascript, but it's not the best solution cuz when you text inside the input and delete it, the placeholder isn't there anymore:

const [inputs, setInputs] = useState([]);

useEffect(() => {
    setInputs(document.getElementsByClassName('pincode-input-text'));
    for (let iinput = 0; input < inputs.length; input += 1) {
        inputs[i].setAttribute('placeholder', '•');
    }
}, [inputs]);

Any suggestions?

Using React with Next JS and everything with the component seems to be running smoothly after installation and API implementation. Now my only problem seems to be how to clear the fields. Not sure how in my React functional component to access the clear() function of the element. Any suggestions would be appreciated, thanks!

PIN is secret and only number

<PinInput length={6} focus // secret inputStyle={{ borderColor: '#5e07a0', borderRadius: '50%', width: '43px', maxwidth: '15%' }} inputMode="tel" pattern="[0-9]*" type="tel" onChange={onChange} />

but when i use secret it show another type in android phone

but when not using secret

This occurs when dynamically passing the input length. Check this sandbox I have created.
https://codesandbox.io/s/react-pin-input-forked-13y1m?file=/src/App.js

Detect enter key press in fields.

Please add disable prop to toggling input's disabled attr.

We have a IOS React Native App that contains a webview, that webview shows this react-pin-input, however this compoent does not seem play nicely with the IOS 'From Messages' feature, where you can paste in the code sent in a SMS message. Only the first number is pasted - i have provided a couple of screengrabs illustrating the issue

Thank you for authoring and maintaining this component.

One request: is it possible to add support for setting an initial PIN value? Right now, there is no straightforward way to set the values programmatically. Happy to submit a pull request, if this is something you are open to including.

I get this error
"'PinInput' cannot be used as a JSX component.
Its instance type 'PinInput' is not a valid JSX element."
on version 1.0.4

I use Next.js (v. 11.1.2)
After updating react-pin-input to the 1.1.0 version yarn build started to fail with the following error.

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/dro/work/rubyroid/italbazar/frontend/node_modules/react-pin-input/dist/bundle.js:1:216)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.17049 (/Users/dro/work/rubyroid/italbazar/frontend/.next/server/pages/_app.js:3804:18)
    at __webpack_require__ (/Users/dro/work/rubyroid/italbazar/frontend/.next/server/webpack-runtime.js:25:42)
    at Object.57080 (/Users/dro/work/rubyroid/italbazar/frontend/.next/server/pages/_app.js:718:33) {
  type: 'ReferenceError'
}

Rollback to version 1.0.1 resolves the issue

in my component i use this, and its not auto focus for pointer

please help

Hi author, may i know if this package will refactor to functional component base ?

Be great if could allow to copy and code then paste into first input and for the rest of the inputs fill with the correct number.

Hey, is it possible to disable chrome's autocomplete password?

Any time I try writing in the pin item, it shows the dialog to fill in from passwords.

In plain HTML I tend to use autoComplete="new-password", seems to do the job.

Hello.

Like the title says, I am unable to style the boxes. Overriding the default styles in a new .scss file does not work. Neither does the CSS in JSX method works. Even doing 'display: none' on the component has no effect whatsoever.

Kindly guide me on how to do it. Thank you.

using "OnComplete" function, I am trying to focus on the next input element on my webpage, however, I am not able to focus. It only works when the last character in pin input is removed and added again. but not the first time.

Pin Input somehow maintains the focus unless manually clicked somewhere in the background.

Hi,
we are using react-pin-input package with our project.
we had a requirement of showing asterisk in place of dots when user gives the Pin.
tried of overriding or doing some hack kind of thing to resolve, but none of them worked.
Can you help us by providing the feature of using asterisk within the package.

I try to clear the input fields after onComplete is called

<PinInput
        length={4}
        type="numeric"
        ref={p => pin = p}
        onComplete={(value) => {
          // debugger
          pin.clear()
          props.onComplete(value)
        }}
      />

It clears the first three digits but not for the last input field.
Please see the image.

disabled?: boolean should be added to interface PinInputProps in react-pin-input.d.ts .

The placeholder is created in a shadow DOM right now and there's no way to modify the styling.

Please at least add "part" attributes on the elements within the shadow DOM to allow developers to customize the stylings.

Or, another alternative is to add another props like "placeholderStyle".

Autosave of pin entered in the boxes is enabled in the package.

Is there a way to disable the chrome autofill behavior if the PIN value is entered and submitted?

Hi, this is a nice work you done here, but could you update the sandbox example?

It uses an outdated (v0.9.2) version that is missing some features such as paste input

I need to include this as a controlled component for use in forms, (inside a wrapped field with something like React Final Form),

As such the initialvalue may change (say for instance via form reset).

Once the object is rendered, change to initialvalue has no effect

Can you please expose a method (like ref.clear()) to set the current value, that way I can use a react side effect to listen to changes in my wrapped component, and then inject these changes into your pin code component.

Thanks.

Hi,

First of all thank you for the module :)

Even though I put "numeric" as type for the input, the keyboard is not numeric at all for Android, and starts as numeric for Iphone, but then switches back to letters after one input.

Thanks for your help,

Antoine