how react programmatically focus input

Question

I'm trying to implement a very simple use case, a UI feature, where:

There is a label with some content in it
If clicked, a text input replaces it with the content of label available
User can edit the content
When enter is pressed, the input hides and label is back with updated content

I could get finally all correct (in fact with a MongoBD backend, redux, etc.), and the only thing I couldn't ever do (paying a complete day in googling and reading S.O.F similar posts) was this:

When my text input appears, I can't transfer focus to it! First I tired this way:

<div className={((this.state.toggleWordEdit) ? '' : 'hidden')}>
<input id={this.props.word._id} className="form-control"
        ref="updateTheWord" 
        defaultValue={this.state.word}
        onChange={this.handleChange}
        onKeyPress={this.handleSubmit}
        autoFocus={this.state.toggleWordEdit}/></div>
    <div className={((this.state.toggleWordEdit) ? 'hidden' : '')}>
      <h3 onClick={this.updateWord}>
        {this.state.word}</h3>
    </div>

but autoFocus sure didn't work (I "guess" because the form is rendered, but in hidden state, making autoFocus useless).

Next I tried in my this.updateWor, many of suggestions I found on google and S.O.F.:

this.refs.updateTheWord.focus();

which together with similar suggestions all didn't work. Also I tried to fool React just to see if at all I can do something! I used real DOM:

    const x = document.getElementById(this.props.word._id);
    x.focus();

and it didn't work either. One thing I even could not understand to put into word is a suggestion like this: having ref as a method (I "guess") I didn't even try it because I have multiples of these components and I need ref to further get value of, per component, and I couldn't imagine if my ref is not named, how I could get the value of!

So could you please give an idea, helping me to understand that in case I'm not using a Form (because I need a single input box replacing a label) how I could set its focus when it's CSS (Bootstrap) class is losing 'hidden' please?

in this case, as soon as the input is rendered the callback defined by ref will be executed, passing in a reference to the current element. you can use this callback function to define a reference to the dom node - for example ref={c => this.refs.c = c}. then, you can use this.refs normally (just make sure it's defined beforehand). — Brian
– Brian, Commented Mar 31, 2017 at 19:34

TRomesh · Accepted Answer · 2024-04-11 18:41:29Z

56

The way you have used refs is not the most preferred way or else its not the best practice anymore . try some thing like this

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

  focus() {
    this.textInput.current.focus();
  }

  render() {

    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Set Focus"
          onClick={this.focus}
        />
      </div>
    );
  }
}

Update
From React 16.3 upwards you can use the React.createRef() API

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focus = this.focus.bind(this);
  }

  focus() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Set Focus"
          onClick={this.focus}
        />
      </div>
    );
  }
}

From React 18.xx upwards you can use the useRef Hook

import React, { useRef } from "react";

export const Form = () => {
  const inputRef = useRef(null);

  const focus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <input type="button" value="Set Focus" onClick={focus} />
    </div>
  );
};

With React 18.xx and TypeScript

import React, { useRef } from "react";

export const Form: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const focus = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <input type="button" value="Set Focus" onClick={focus} />
    </div>
  );
};

edited Apr 11, 2024 at 18:41

answered Mar 31, 2017 at 16:48

TRomesh

4,4698 gold badges51 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Avi Kaminetzky Over a year ago

How would I do that dynamically if I have a list of input fields and would like to focus on next input field when user hits enter?

Rockin4Life33 Over a year ago

@AvremelKaminetzky Did you find a solution to your focus issues? If I understand your comment correctly I have a similar issue I'm struggling with. I have a Stateless React component InputStepper that should focus on the first input on load and then move focus after keyup to the next InputStepper input. However, I see the input focus and then lose focus. When I inspect the element <input ... autofocus /> is set but it still does not hold the focus. Is this an issue with React and form/input and focus?

Avi Kaminetzky Over a year ago

@Anovative I can't recall the details, but here was my (hacky) solution: stackoverflow.com/a/46777890/4822174

ghchoi Over a year ago

If not working, especially for newer React, try inputRef instead of ref. I could programmatically focus TextField.

Pedro Silveira Over a year ago

Does anyone have an implementation using function components?

Mehdi Dehghani · Accepted Answer · 2019-02-04 08:00:54Z

24

Just add autofocus attribute to the input. (of course in JSX it is autoFocus)

<input autoFocus ...

answered Feb 4, 2019 at 8:00

Mehdi Dehghani

11.7k6 gold badges64 silver badges68 bronze badges

2 Comments

Ahmed Elbatt Over a year ago

what if you want to auto focus dynmaically like for example one button click ?!

Mehdi Dehghani Over a year ago

@AhmedElbatt You can use boolean state for that, e.g: <input autoFocus={state.autoFocus} ... and change the state on button click.

Ben Carp · Accepted Answer · 2020-12-22 03:37:58Z

9

useFocus hook

// General Focus Hook
const useFocus = (initialFocus = false, id = "") => {
    const [focus, setFocus] = useState(initialFocus)
    const setFocusWithTrueDefault = (param) => setFocus(isBoolean(param)? param : true)
    return ([
        setFocusWithTrueDefault, {
            autoFocus: focus,
            key: `${id}${focus}`,
            onFocus: () => setFocus(true),
            onBlur: () => setFocus(false),
        },
    ])
}


const FocusDemo = () => {

    const [labelStr, setLabelStr] = useState("Your initial Value")
    const [setFocus, focusProps] = useFocus(true)

    return (
        <> {/* React.Fragment */}
            <input
                onChange={(e)=> setLabelStr(e.target.value)}
                value={labelStr}
                {...focusProps}
            />
            <h3 onClick={setFocus}>{labelStr}</h3>
        </>
    )
    
}

For a more complete demo click here.

edited Dec 22, 2020 at 3:37

answered Jul 1, 2019 at 1:44

Ben Carp

26.9k11 gold badges69 silver badges83 bronze badges

2 Comments

llamerr Over a year ago

There seem to be no link for complete demo. Is it available somewhere?

Ben Carp Over a year ago

@llamerr, Today I prefer a similar but slightly different approach: stackoverflow.com/questions/28889826/…. I prefer it theoretically as it's shorter and easier to understand, but also practically, as it seems from my experience to work better on long lists. Please give it a shot and let me know what you think. If you agree I'll update my solution here as well. There might be a demo for this solution somewhere, or if you still find it necessary I can prepare one.

Ali Kleit · Accepted Answer · 2019-05-25 15:34:10Z

4

In addition to the previous answers, I've added setTimeout to make it work

handleClick() {


    if (this.searchInput) {
        setTimeout(() => {

            this.searchInput.focus();

        }, 100);
    }
}

where searchInput is the jsx ref of the input

<input
      type="text"
      name="searchText"
      ref={(input) => { this.searchInput = input; }}
      placeholder="Search" />

and the handleClick() is an onClick handler to any element

answered May 25, 2019 at 15:34

Ali Kleit

3,7793 gold badges28 silver badges44 bronze badges

Comments

moto · Accepted Answer · 2020-11-02 07:21:25Z

1

@BenCarp's answer in typescript

Pass the inputRef to an input and just call setFocus to set the focus to it.

export const useInputFocus = (): [MutableRefObject<HTMLInputElement | undefined>, () => void] => {
  const inputRef = useRef<HTMLInputElement>();
  const setFocus = (): void => {
    const currentEl = inputRef.current;
    if (currentEl) {
      currentEl.focus();
    }
  };
  return [inputRef, setFocus];
};

answered Nov 2, 2020 at 7:21

moto

90013 silver badges29 bronze badges

Comments

Faraz Ahmed · Accepted Answer · 2018-11-26 06:58:30Z

0

Use componentDidUpdate method to every time update the component

componentDidUpdate(prevProps, prevState) {
     this.input.focus();
}

answered Nov 26, 2018 at 6:58

Faraz Ahmed

1,6273 gold badges20 silver badges35 bronze badges

Comments

Zsolt Meszaros · Accepted Answer · 2022-07-24 11:28:35Z

0

You can use "useRef" hook and make a reference to your input control, then use your reference.current.focus()

edited Jul 24, 2022 at 11:28

Zsolt Meszaros

23.3k19 gold badges60 silver badges70 bronze badges

answered Jun 12, 2021 at 11:07

H. Rashed

94 bronze badges

1 Comment

Amy Over a year ago

video is unavailable

Collectives™ on Stack Overflow

how react programmatically focus input

7 Answers 7

5 Comments

2 Comments

useFocus hook

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

2 Comments

useFocus hook

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related