Question 195168 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How do I check if my input is on focus from the child component when I also need to prop drill the ref a parent component?

I am trying to update styles based on if the input is on focus. I understand that I can use useRef here, but inputRef is an optional prop that can be used by a parent component. How can I check if my input is on focus from my child component shown here?

import React, { RefCallback, FocusEventHandler } from "react";
import { RefCallBack } from "react-hook-form";

interface IInput {
  inputRef?: RefCallBack;
  onFocus?: FocusEventHandler<HTMLInputElement>;
}
const Input: React.FC<IInput> = ({ inputRef, onFocus }) => {
  return (
    <div>
      <input type="text" ref={inputRef} onFocus={onFocus} />
    </div>
  );
};

export default Input;
Tags:

2

Answers


  1. 0

    You can evaluate the input’s focus state by checking for the current document.activeElement inside a useEffect. Something like so:

    React.useEffect(() => {
  if (document.activeElement === inputRef.current) {
    // update a different state variable
  }
}, [inputRef.current])

    Then you can use that state to dynamically set styles on your parent div.

    Login or Signup to reply.
  2. 0

    To check if the input is focused from your child component, you can use the useRef hook and the onFocus event handler. Here’s an updated version of your code with the necessary changes:

    import React, { useRef, FocusEvent, RefCallback, FocusEventHandler } from "react";
import { RefCallBack } from "react-hook-form";

interface IInput {
  inputRef?: RefCallBack;
  onFocus?: FocusEventHandler<HTMLInputElement>;
}

const Input: React.FC<IInput> = ({ inputRef, onFocus }) => {
  const inputElementRef = useRef<HTMLInputElement>(null);

  const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {
    // Trigger the parent's onFocus event handler, if provided
    if (onFocus) {
      onFocus(event);
    }
    // You can perform additional actions here when the input is focused
    console.log("Input is focused");
  };

  // Attach the inputRef prop to the actual input element using the ref callback
  const attachRef: RefCallback<HTMLInputElement> = (element) => {
    // Attach the ref to the input element
    if (inputRef) {
      inputRef(element);
    }
    // Attach the ref to the useRef hook
    inputElementRef.current = element;
  };

  return (
    <div>
      <input type="text" ref={attachRef} onFocus={handleFocus} />
    </div>
  );
};

export default Input;

    In this updated code, useRef is used to create a reference to the input element. The handleFocus function is the event handler for the onFocus event, which triggers the parent’s onFocus event handler if provided and performs additional actions (in this case, logging a message).

    The attachRef function is used as the ref callback to attach the inputRef prop to the actual input element using the ref attribute. It also attaches the ref to the useRef hook by assigning the element to inputElementRef.current.

    Now, within the handleFocus function, you can add any additional logic you need when the input is focused.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search