SiriChandanaGarimella
commented
6 months ago @cbiddle3 - Summarizing the key points that we discussed for your reference,
- Ensure the Search box is aligned with other elements on the page.
- Minimize the padding in the input field of Search.
- Disable the Search button after the Clear button is clicked also disable the Clear button when there is no input provided.
- Enable the Search feature upon pressing the Enter key.
- Allow a maximum of 55 characters in the Search box input.
Also, I could see that a compose-dev file has been added. As it is not relevant to this story, can you please remove it?
Fixes #75
What was changed?
When the user presses Signup for Shifts from the navigation bar, there is now a search bar with a clear button and a search button. The user can also press enter while in the search bar field to search. This validates users' input and only allows them to enter alphanumeric characters as well as "-", " ' ", '&', " / ", "(", ")", ":" or "," and requires the search to be at least 5 characters.
Why was it changed?
To provide easier functionality for the user so they could search for a specific shelter instead of having to scroll through all the shelters.
How was it changed?
SearchBar.js was created as a Component and is in the Components directory. The SearchBar object has its own search button, clear button, and keyDown listener so the user can press enter. SearchBar.css provides styling for the search bar, and code that ensures the buttons match the styling from the rest of the webpage. To add the Search bar on the page, I altered Shifts.js and added the component between the current location and radius selection.
Search button enabled:
Search button disabled: