FIxed mobile view when searching on project page

[ldaws003]

Fixes #8466

What changes did you make?

• replaced query selector for inputEl, glassEl, closeEl with document.querySelectorAll
• renamed inputEl to allInputEl, glassEl to allGlassEl, closeEl to allCloseEl
• attached eventlisteners for focus and keydown events to the elements in the allInputEl array with the searchOnFocusEventHandler and the searchEnterKeyHandler callbacks respectively
• attached eventlisteners for click events to the elements in the allGlassEl array with the searchEventHandler callback
• attached eventlisteners for click events to the elements in the allCloseEl array with the searchCloseEventHandlercallback
• set the searchTerm variable in searchEventHandler to e.currentTarget.value

Why did you make the changes (we will use this info to test)?

• The original way of setting inputEl, glassEl, and closeEl had it so that it only set the events for the search form on desktop and not on mobile, making it so that the mobile search text would do the default form behavior of reloading the page
• The searchTerm variable only retrieved the value from the desktop search bar, so setting the searchTerm to e.currentTarget.value makes it so that it would retrieve the search term from the element that originated the event which would be either mobile or desktop search bars

CodeQL Alerts

After the PR has been submitted and the resulting GitHub actions/checks have been completed, developers should check the PR for CodeQL alert annotations.

Check the PR's comments. If present on your PR, the CodeQL alert looks similar as shown

Please let us know that you have checked for CodeQL alerts. Please do not dismiss alerts.

• I have checked this PR for CodeQL alerts and none were found.
• I found CodeQL alert(s), and (select one):
  • I have resolved the CodeQL alert(s) as noted
  • I believe the CodeQL alert(s) is a false positive (Merge Team will evaluate)
  • I have followed the Instructions below, but I am still stuck (Merge Team will evaluate)

Instructions for resolving CodeQL alerts

If CodeQL alert/annotations appear, refer to How to Resolve CodeQL alerts.

In general, CodeQL alerts should be resolved prior to PR reviews and merging

Screenshots of Proposed Changes To The Website (if any, please do not include screenshots of code changes)

• No visual changes to the website

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

---

From your project repository, check out a new branch and test the changes.

git checkout -b ldaws003-mobile-view-8466 gh-pages
git pull https://github.com/ldaws003/website.git mobile-view-8466

[castillios]

Availability: Tues 9/15 2pm-6pm, Thurs 9/17 & Fri 9/18 1pm-6pm
ETA: By Fri 9/18 EOD

[castillios]

Hi @ldaws003! Sorry for the delay this past week, I just reviewed your PR.

• Action items and CodeQL alerts checked off
• PR is done in correct branch & issue is linked
• I tested search bar behavior on mobile views both before and after the changes were made to recreate the original issue and test your fixes. Everything functions as expected on mobile after a search is made:
  • The scroll position no longer resets
  • The filter toolbar persists
  • The correct search results are displayed (I get the same search results before and after the changes were made!)
• Reasoning on changes made and why is included in the PR -- thanks for the detailed description! After taking a close look at your code, everything LGTM.

All in all, great work!

[castillios]

Actually I noticed something after submitted my review, sorry!

I was primarily pressing Enter to test search results, however after clicking the magnifying glass to enter a query, it would render inconsistent results (on both desktop and mobile) and consider the search query empty:

• Clicking magnifying glass on the original site: https://www.hackforla.org/?Search=311
• Clicking magnifying glass on the local deployment with changes: http://localhost:4000/?Search=

It might be because e.currentTarget.value listens to .search-glass when it's clicked. And because it has no value attribute, search results return undefined. I believe one solution would be to use the closest() method to always target the search-bars, but this is just an idea since there are multiple ways to approach this!