useRef current and click event target are not equal even though they should be

Question

I have a div element that I want to call a function from when a click event fires on it. The div contains an input field that I don't want to trigger the function, so I'm using useRef to target only the div element itself and not the contents. I'm creating the reference with the hook, giving the div a ref attribute pointing to that reference, and then passing it an onClick event that first checks if ref.current is equal to the event target. This method has worked for me in the past when building features such as modals, but for some reason this time the value of ref.current and the value of the event target are not evaluating as equal, and so the function never fires off. Here's the code:

const VideoEntryTile: React.FC = () => {
  const [isExpanded, setIsExpanded] = useState<boolean>(false);
  const containerRef = useRef<HTMLDivElement | null>(null)

  const handleExpand = (e: any):void => {
    console.log(containerRef === e.target) // This evaluates to false
    if (containerRef.current === e.target) {
      setIsExpanded(true)
    }
  }

  return (
    <div
      className={styles.VideoEntryTile__Container}
      onClick={handleExpand}
      ref={containerRef} {/* The reference is set here */}
    >
      <div className={styles.VideoEntryTile__Top}>
        <div className={styles.VideoEntryTile__LeftActions}>
          <div className={styles.VideoEntryTile__LeftActions__VideoNameInput}>
            <TextField
              disabled={false}
              inputSize="large"
              value="Video 1"
            />
          </div>
          <div className={styles.VideoEntryTile__LeftActions__GuestsContainer}>
            <p>Guests</p>
            <input />
          </div>
          <button type="button">-</button>
          <button type="button">+</button>
        </div>
        <div className={styles.VideoEntryTile__RightActions}>
          <p>20</p>
          <p>Credits</p>
        </div>
      </div>
      { isExpanded ?
        (
          <div className={styles.VideoEntryTile__Bottom}>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
          </div>
        )
        : null }
    </div>
  );
};

Any idea why this isn't working? This solution has worked for me in the past so I'm not sure why it isn't now.

E: This thread should not have been closed - the provided "answer" has nothing to do with my question.

This thread should not have been closed - the provided "answer" has nothing to do with my question. — user16248109
– user16248109, Commented Jan 12, 2022 at 17:58
Yeah I'm pretty sure this is not a duplicate of that question, this is about inequality of a ref value and event target, not the difference in general between currentTarget and target on an event. — Henry
– Henry, Commented Jan 12, 2022 at 18:33
Not sure why this doesn't work though. Could be that there isn't anywhere to actually click on the container. Try logging the event target and see if that helps. You might consider adding click handlers on the buttons that stop propagation so that clicking anywhere else in the container expands it, just not on the buttons (or any other elements you want to exclude). — Henry
– Henry, Commented Jan 12, 2022 at 18:49

Nemanja · Accepted Answer · 2022-02-27 17:49:00Z

1

I know this is an old topic and the question is very old, but maybe it will be useful to someone. 🤷‍♂️

Code:

const handleExpand = (e: any):void => {
  if (containerRef.current.contains(e.target)) {
    setIsExpanded(true)
  }
}

Problem:

In your case useRef is returning the current as an Object. By comparing the e.target which is a reference to the object onto which the event was dispatched and an Object the comparison will never be equal.

Solution:

Check if the reference to the object (returned by e.target) is contained inside the useRef.current node.

answered Feb 27, 2022 at 17:49

Nemanja

6042 gold badges8 silver badges17 bronze badges

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

1 Comment

confusedcius Jan 16 at 3:25

If I understand correctly, this makes the handler react to clicks on the children nodes of said div, which is not the right behavior

Collectives™ on Stack Overflow

useRef current and click event target are not equal even though they should be

1 Answer 1

Code:

Problem:

Solution:

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Code:

Problem:

Solution:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related