I'm using React Hooks. I want to check which input is focused. I have an object of dynamically generated inputs. The inputs will be selected and I want to have a button that will append a value to the input that is in focus.

I'm using React Hooks. I want to check which input is focused. I have an object of dynamically generated inputs. The inputs will be selected and I want to have a button that will append a value to the input that is in focus.

• javascript
• reactjs
• dom
• react-hooks

5 Answers 5

(Edit) Updated to a much better solution using React Hook

Most solutions I've e across don't take into account when the form has no active element. Hence I came up with the following hook to cover this case.

const useActiveElement = () => {
  const [listenersReady, setListenersReady] = React.useState(false); /** Useful when working with autoFocus */
  const [activeElement, setActiveElement] = React.useState(document.activeElement);

  React.useEffect(() => {
    const onFocus = (event) => setActiveElement(event.target);
    const onBlur = (event) => setActiveElement(null);

    window.addEventListener("focus", onFocus, true);
    window.addEventListener("blur", onBlur, true);

    setListenersReady(true);

    return () => {
      window.removeEventListener("focus", onFocus);
      window.removeEventListener("blur", onBlur);
    };
  }, []);

  return {
    activeElement,
    listenersReady
  };
};

https://codesandbox.io/s/petent-thunder-59u55?file=/src/Form.js

That should make it easier for you to detect which form input is active.

Try to add events on Focus and on Focus Lost.

W3Schools Reference

 <input type="text" onFocus="this.props.onFocus()" onFocusOut="this.props.lostFocus()">

You could use onFocus event.

function handleFocus(e) {
  // logic here
}
<input onFocus={handeFocus} />

If you want to change input value, you could also use onChange event and value attribute.

const [value, setValue] = useState('')

function handleChange(e) {
  setValue(e.target.value)
}

function handleFocus(e) {
  // logic here
  setValue('input focused')
}
<input value={value} onChange={handleChange} onFocus={handeFocus} />

I did it with <form /> tag

import { createContext, useContext } from react;

const FormContext = createContext({});

const Form = () => {
  const [ formState, setFormState ] = useState({})
  const onFocus = (e) => setFormState(state => ({
    ...state,
    focused: e.target.name
  }));
  const onBlur = () => setFormState(state => ({
    ...state,
    focused: null
  }));

  return (
    <FormContext.Provider value={formState}>
      <form onBlur={onBlur} onFocus={onFocus}>
        {children}
      </form>
    </FormContext.Provider>
  )
}

const ButtonAdd = () => {
  const { focused } = useFormContext();

  const onClick = () => {
    // do what you need with focused field here
  }

  return (
    <button type='button' onClick={onClick} disabled={!focused}>
      add
    </button>
  )
}

const App = () => {
  return (
    <Form>
      <input type="text" name="field1" />
      <input type="text" name="field2" />
      <ButtonAdd />
    </Form>
  )
}

Hope this will help :)

import React,{useRef} from "react";
import "./styles.css";

export default function App() {
    const  inputRef = useRef();
    const onButtonClick=()=>{
      inputRef.current.focus();
    }
  
  return (
    <div className="App">
      <input type="text" value="" ref={inputRef}/>
      <button onClick={onButtonClick}>Focus the input</button>
    </div>
  );
}