Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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 GitHub Comments

2reactions

TimKolbergercommented, Feb 4, 2021

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.

1reaction

with-heartcommented, Apr 22, 2021

@MikeMajara Reproduce in CodeSandbox please