fix(clear-search): Fixed Clear Search When Someone Clicks Out of The Page.

[MirzaHanan]

Problem:

The application retains the search term in the UI state when users navigate away from the profile page to either the people page or the bounty homepage and other routes. This behavior is inconsistent with typical user expectations where a search term should be cleared upon navigating to a different page.

Expected Behavior:

When a user navigates away from the profile page, the search term entered should be automatically cleared. This ensures that when the user visits the people page or the bounty homepage and other all routes, they are presented with a fresh state, unfiltered by their previous search.

Issue ticket number and link:

• Ticket Number: [ 1409 ]
• Link: [ https://github.com/Clear search when going back to the people page sphinx-tribes#1409 ]

Solution:

The solution involves adding an event listener in the UiStore class constructor to detect click events on the document. If a click event occurs outside the search input (.search-input-wrapper), the clearSearchText method is called to reset the searchText state to an empty string.

Changes:

• Modified the UiStore class constructor to include a document click event listener.
• Implemented handleDocumentClick, a method to check the target of click events and determine if they occur outside the search input area.
• Developed clearSearchText method to reset the search text.

Evidence:

Please see the attached video as evidence.

• Before Demo: Link
• After Demo: Link

Testing:

• Click-based Navigation: Clicking on various elements and navigating to different pages to verify that the search term is cleared.
• Keyboard Navigation: Ensuring that non-click based navigations also result in the search term being cleared.
• Edge Cases: Testing with rapid navigation, back and forth between pages, and refreshing pages to observe the persistence of the search term.

[MirzaHanan]

Hi @ecurrencyhodler,
Please review this PR

[ecurrencyhodler]

Okay let's get a code review. GJ.

[elraphty]

@MirzaHanan This breaks the search on the People Tab

[MirzaHanan]

Hi @elraphty,
Please check the search functionality in demo on the People Tab; it is already broken.

[ecurrencyhodler]

We just merged a fix. Can you pull from master again? Also you have a read.me conflicting file.

[MirzaHanan]

Ok @ecurrencyhodler

[MirzaHanan]

@ecurrencyhodler Please check it.

[ecurrencyhodler]

Great job! Okay we need a code review.

[ecurrencyhodler]

Tested and paid. LGTM!

[ecurrencyhodler]

Actually mirza there was one scenario where this wasn't addressed. I recorded it here. It looks like when I search inside a profile and go to people's page, the search is saved but hidden.

Can you do a follow up PR so that the search is completely cleared?

Screen.Recording.2024-01-28.at.8.51.32.PM.mov

[MirzaHanan]

Hi @ecurrencyhodler,
I fix it today.