This was a weird one. The search bar is really a modal in disguise. In the original design, it seems like you are supposed to be able to click anywhere on the input and the modal animates from the top of the screen. The modal contains all the real functionality.
The actual airbnb website search bar is an input, 3 buttons, 3 underlays styled to look like one input. The bar animates and grows larger and the search text is displayed next to the magnify on focus.
I tried to implement more of the real airbnb design search bar.
Since I used focus to render the location suggestions panel, you can't tab focus them even though the links are buttons. The minuses and pluses can be tab focused on the guest panel but you can't click them with your keyboard.
Using svgs representing + & - inside the buttons prevents clicks from registering.
When hiding content with event listeners, onClick is too slow and you are better off using onMouseDown instead. See Stack Overflow.
The images linked in the json are not small and can cause hitching when scrolling. I lowered the image dimensions since the images are only 400px.
This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.
- Steps to replicate a design with only HTML and CSS
- Codepen - multiple input search bar
- Codepen - airbnb style search bar
- Codepen - airbnb style search bar
- Pluralsight - load and render json data
- YouTube - focus-within
- YouTube - airbnb clone
- YouTube - modals
- Blog - react portals
- Codeply - airbnb style search button
- Stack Overflow - event handler added too late
- FreeCodeCamp - filter component in react
- Stack Overflow - updating an object in react
- Stack Overflow - batching
- Stack Overflow - sequential state updates
- Stack Overflow - reset filter
- Stack Overflow - responsive placeholder texts
- Power Mapper - onmousedown needs keydown event handler
- CodeSandbox - Modal keyboard management
- Stack Overflow - unused setState function