PinInput not support ref property
See original GitHub issue🐛 Bug report
PinInput not support ref property.
💥 Steps to reproduce
Create project with react, typescript and chakra-ui and try pass a Ref for a PinInput.
🧐 Expected behavior
PinInput accept a Ref.
🌍 System information
Software | Version(s) |
---|---|
Chakra UI | 1.1.6 |
Browser | Google Chorme |
Operating System | Mac OS |
📝 Additional information
<PinInput ref={forwardedRef} colorScheme="pink" otp onChange={setValue}>
<PinInputField />
<PinInputField />
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
(JSX attribute) ref: React.ForwardedRef<HTMLInputElement>
Type '{ children: Element[]; ref: ForwardedRef<HTMLInputElement>; colorScheme: string; otp: true' is not assignable to type 'IntrinsicAttributes & PinInputProps & { children?: ReactNode; }'.
Property 'ref' does not exist on type 'IntrinsicAttributes & PinInputProps & { children?: ReactNode; }'.
Issue Analytics
- State:
- Created 3 years ago
- Comments:12 (7 by maintainers)
Top Results From Across the Web
How to use the ref property in a react-native-paper TextInput
I'm trying to use the react-native-paper TextInput as a field to show a location search input. This doesn't seem to work because the...
Read more >property ref does not exist on type intrinsicattributes - You.com
PinInput not support ref property. Steps to reproduce. Create project with react, typescript and chakra-ui and try pass a Ref for a PinInput....
Read more >Unlock the Secret Power of React Hook Form - CopyCat Blog
In this article, we'll dive into getting started with React Hook Form and why the library is useful in building forms in a...
Read more >Espruino Hardware Reference
Set the mode of the given pin. auto / undefined - Don't change state, but allow digitalWrite /etc to ...
Read more >react-pin-input - npm
React component for PIN like input. Latest version: 1.3.0, last published: 5 months ago. Start using react-pin-input in your project by ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
You can use the Controller component of react-hook-form to add components your form, which manage their state in react, and not in the DOM. Please have a look at this codesandbox for an example implementation of NumberInput and PinInput.
@MikeMajara Reproduce in CodeSandbox please