Deselect element when clicking outside

JavaScript
1

Hi everyone,
Basically, when you click on the lens icon, it shows a hidden search bar, and if you click again on the lens, it hides it back. How can I achieve the same result, (hiding it) by clicking on the body, hence anywhere outside the icon itself?
Hope it was clear, thanks in advance.
LINK

P.S. To add the transition, I added the class “active” to the div, and through JS I simply toggle it with a click event.

2

You could listen to click and remove active class when not search is clicked:

document.addEventListener('click', (e) => {
  if (e.target.nodeName === 'BODY') {
    search.classList.remove('active')  
  }
})
1 Like
3

You could also listen for the blur or focusout event.

2 Likes
4

Using a blur event would make it more keyboard accessible as well. Speaking of, the lack of focus indication isn’t great for keyboard accessibility.

5

Listening on blur will cause input to shrink after pressing TAB to navigate to search button.

6

Well, that is the same behavior as the original code (using class toggle). But it’s definitely something to consider.

Not really sure what the intention of the button is. Is it just to toggle open the search or will it be used as an actual submit button inside a form? The tab order is also a little odd with the current code as you focus the input before the button but you can’t see the input.

Not really sure how to best handle both cases. I was playing around with the relatedTarget property but I’m not really sure I have thought this through.
https://codepen.io/lasjorg/pen/VwKqWeY

7

Thank you! Apparently I was close, I was just missing the “nodeName” property.

8

You’re right; I was just following along with a Udemy course on JS small projects, and I wanted to play around with it and add some extra functionality. So I’m not sure what the purpose of the button would be, either. So you definitely have a point.
When it comes to relatedTarget, could you briefly explain it or give me a good resource? I’m a beginner and I haven’t touched on that one. Thanks a lot!

9

You could use the following method to solve , this happened with me as well -

document.addEventListener('click', (e) => {
  if (e.target.nodeName === 'BODY') {
    search.classList.remove('active')  
  }
})
10

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

11

You can look at the MDN page for it, the table they have explains it.

As an example. If you listen for blur on an input and tab to a button, the relatedTarget will be the button. If you listen for focus on an input and tab from a button, the relatedTarget will be the button.

1 Like
12

Your example was simple and to the point. I was getting lost in such an easy concept, haha. Thanks so much

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.