Custom Search Input

Here is a custom search input control I built for my Church Social app. I really wanted users to be able to select both a region (province/state) and a country at the same time. I also wanted users to be able to search. You'll notice I use a separate search input from the main input, which makes it possible to search for a new value, while still seeing the old value. This control is fully keyboard accessible, and tabbing works perfect from input to input.

Be sure to watch the attached video! 🎬

I built this control with Tailwind CSS, Vue.js and Popper.js.