Detect Clicks Anywhere on a Page in React

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@npf21]

Loved how you broke it down solving the issue in simple terms. Its definitely one that could be made into a readily available hook as it could be used in multiple dialogs (search bar, drop down filters, ...). In one of my projects we just had toggleDialog function to switch state but not to include escape in MUI but i think it has onClose hook that you can handle outside click or escape. What would be a specific example edge case where you would use input type as text over search?

[@colbyfayock]

definitely agree, would make a nice hook! id mostly use the type="search" for search-related inputs. just off of the top of my head, if you were doing an address autocomplete input where the default experience would be a standard address form, but if you start typing into the Address 1 input, you can provide a little dropdown to fill out the rest based off an address API. although that still feels like a "search", given the default experience is not a search, rather the search is a helper/enhancement, you'd likely semantically want to use an input type of text similarly if maybe you're doing an email input where you autocomplete some common email platforms, such as ['gmail.com','yahoo.com',etc]. you'd want to use a type of email there, but provide the ability for someone to dismiss the UI a standard search input like this example is probably the most common pattern though

[@John-eq5cd]

I came to this from Colby's video on the dialog HTML element with the idea of applying the click-close code to a pop-up dialog. However, I just couldn't get it to work when checking if event.composedPath().includes the ref for the dialog element. Surprisingly, the dialog element, when open, seemed to take over the whole of the Section element, wherever I clicked it was still on the dialog and so it would not close. Therefore I created a variable for the image within the dialog using getElementById and when clicking away from this the dialog successfully closed.

[@colbyfayock]

hey! what i ended up doing in the dialog example was applying the ref to the inner div which in my case was expanded to the size of the inner dialog. glad you got something working though!

[@hassanad94]

Nice Thought... This kind of mentality opened up a lot of things for me... I started my carrier with vanilla js, and after a 2-3 years i learned react. Since than i have some struggles... How to do things the react way... But this solution is clear... :D Thank you :D Just buy seeing this i get to do lot of other things :D

[@colbyfayock]

glad you enjoyed it! it's definitely important to find ways of being able to achieve things like this without "breaking out' of the "react way" as much as you can, but luckily this doesnt interfere with React's internal operations to make it a great solution

[@erikslorenz]

The new dialog element is the GOAT. This is one of those common patterns that is really annoying when using a client side framework.

[@colbyfayock]

I definitely need to spend some more time with it

[@erikslorenz]

between dialog and popover api that's like a whole category of stuff that makes my life easier. I actually think its also more difficult to use in a frontend framework vs just vanilla js since you need to access the elements directly. Feels like those "you probably dont need jquery" years are coming full circle but this time with react and such lol@@colbyfayock

[@bandekhoda7801]

I was actually wondering how to replicate this type of a behaviour, and boom...

[@colbyfayock]

💥 glad it helped!

[@CanRau]

Basically only every update interactively, started doing this with yarn v1, can’t go back to non interactive

[@colbyfayock]

hey not totally sure what you're referring to?

[@CanRau]

This was meant for another video but while I posted my watch list has already moved to the next video, hoped YT would properly handle this but apparently doesn't 😅

[@colbyfayock]

Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

[@parubok]

Thanks!

[@projectnum0593]

Thanks

[@colbyfayock]

youre welcome!

[@regedieddy]

Thanks man. Your solution works fine. Before i did try to use !ref.current.contains(event.target)) but it didn't work for me. Contains method did not find node.

[@colbyfayock]

ah, glad this worked for you!