A look inside your browser

Image for post
Image for post
Photo by Krsto Jevtic on Unsplash

Let me tell you a story. I was building yet another date picker component for our design system. It consisted of text input and a pop-up calendar. The calendar can be closed by clicking outside it or by selecting a date.

Image for post
Image for post
Date picker component

Most implementations of the click outside logic are made with actual click listeners attached to the DOM. However, I wanted to make our date picker accessible, so you could open a calendar with tabs and close it the same way. Additionally, click listeners may conflict with each other if you put several date pickers on the page.

What if you could just rely on native focus and blur events instead of detecting clicks outside? They naturally support tabs, touch and click events, and are already implemented in the browser. The only problem is that when you click on the pop-up but do not select a date, focus shifts to the calendar, triggering a blur event on the text input and eventually closing the pop-up. …

About

Ilya Lyamkin

JS Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store