question-mark
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.

Can't set ref to <Input>

See original GitHub issue

I am unable to set a ref to a Input, which I want to use to focus() on it.

It seems to be because Input is not declared as a class. (which is required to set refs)

<Input
  isColor={emailWarning && 'danger'}
  type="email"
  placeholder="example@provider.net"
  name="email"
  value={email}
  onChange={this.handleEmailChange}
  ref={input => {
    this.emailInput = input
  }}
/>

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
kacharcommented, Nov 17, 2019

Hey @AlgusDark

I’m experiencing the same issue as stated above, so I consider the case still to be ongoing.

import { Input } from "bloomer";
const inputRef = React.createRef();
<Input id="name" type="name" ref={inputRef} />
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Here’s an example setup: https://codesandbox.io/s/black-thunder-8enky?fontsize=14


I did stumbled upon this problem while trying to integrate Bloomer with React Hook Form

The main mechanism to link that lib is using the register method as follows:

import useForm from "react-hook-form";
import { Input } from "bloomer";

function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Example</label>
      <Input name="example" defaultValue="test" ref={register} />
      <input type="submit" />
    </form>
  );
}

Here’s an integrated example: https://codesandbox.io/s/react-hook-form-get-started-1z7bw?fontsize=14&hidenavigation=1&theme=dark

Any assistance on closing this topic will be appreciated 🙇‍♂️

0reactions
AlgusDarkcommented, Nov 18, 2019

Sorry @kachar , the problem is that we don’t have react forward ref in the components.

I decided to rewrite the library to be more friendly. The quickest solution would be to start wrap the components in a forward ref, but my main focus is to rewrite the library as there are some utils that we don’t need and could be done with stronger Types with TS and let the user to deal with errors instead of fix them. But that’s something is not related in this issue.

Would you like to make the fordwardRef solution and make a PR?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Assigning ref to HTMLInputElement giving error in typescript
In useRef variable cannot set to input element
Read more >
Refs and the DOM - React
Refs provide a way to access DOM nodes or React elements created in the render method. In the typical React dataflow, props are...
Read more >
Cannot set property with ref callback · Issue #148 - GitHub
I am trying to set a ref attribute using a class method: export default class Foo extends Component { handleClick (event) ...
Read more >
FAQs | React Hook Form - Simple React forms validation
Note: Because ref has not been registered, React Hook Form won't be able to register event listeners to the inputs. This means you...
Read more >
Focus management with Vue refs - Learn web development
You should see a focus outline on the input for adding new to-do items. ... Inside it, assign your ref to a variable,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found