How do i get which element is clicked/focused in blur event of another element

Question

In my react application, I have blur event listener, in my listener function I want to know, on which the focus went to. How can I get to know that in chrome browser?

The below is my onBlur event function

const handleBlurOfDateInput = (date, event) => {
    const valueEntered = datetoMomentDate(date);
    // Here i want to check, which element got focused using event
    hide && hide();
    onChange(valueEntered);
};

Answer 1

You can use event.target , or document.getElementFromPoint(event.pageX, event.pageY)

const handleBlurOfDateInput = (date, event) => {
    const valueEntered = datetoMomentDate(date);
    // Here i want to check, which element got focused using event
    hide && hide();
    onChange(valueEntered);
};

Answer 2

const handleBlurOfDateInput = (date, event) => {
  const valueEntered = datetoMomentDate(date);
  if(event.relatedTarget){console.log(event.relatedTarget)}
  hide && hide();
  onChange(valueEntered);
};

You can use relatedTarget .

Notice that relatedTarget will return null if the element focused is not an input. In this case, you can use tabIndex = '0' for that element.