I am trying to show the recent searches when an user clicks to the input form to type something. And hide it when the user clicks outside of the input box. I'm using Vue (v3.2.29).

I've got the first part(showing the div when user clicks the input box) working but cannot solve the second part of the problem.

Apparently there is no straightforward way in JavaScript to tell whether the DOM is in focus or not.

This what my function for this looks like:

const showRecentSearches = () => {
  if (document.getElementById("search-box") === document.activeElement) {
    return true;
  } else {
    return false;
  }
};

This works fine for showing the div when the input is in focus but fails to hide it when it is out of focus.

Edit: This code from a discussion on GitHub solves the problem with a custom directive for click-outside event.