fix(search): L3-5101 search bar flashing and removes typed search #478

SRangineni88 · 2025-01-21T14:08:07Z

Jira ticket

Screenshots

Before	After
Paste Before Image	Paste After Image

Summary

Search Bar Flashing and Removes Typed Search

Change List (describe the changes made to the files)
Added css transition on search to minimize the flickering
Removed logic to close search immediately on key press or on clicking the search result link.

Additions, Changes, and Removals

Acceptance Test (how to verify the PR)

Add step by step instructions on how to verify the change

Regression Test

(Optional) Add verification steps to make sure this PR doesn't break old functionality

Evidence of testing

Post logs, screenshots, etc

Things to look for during review

PR title should correctly describe the most significant type of commit. I.e. feat(scope): ... if a minor release should be triggered.
All commit messages follow convention and are appropriate for the changes
All references to phillips class prefix are using the prefix variable
All major areas have a data-testid attribute.
Document all props with jsdoc comments
All strings should be translatable.
Unit tests should be written and should have a coverage of 90% or higher in all areas.

New Components

Are there any accessibility considerations that need to be taken into account and tested?
Default story called "Playground" should be created for all new components
Create a jsdoc comment that has an Overview section and a link to the Figma design for the component
Export the component and its typescript type from the index.ts file
Import the component scss file into the componentStyles.scss file.

…Typed-Search

netlify · 2025-01-21T14:08:27Z

✅ Deploy Preview for phillips-seldon ready!

Name	Link
🔨 Latest commit	`aa60eb4`
🔍 Latest deploy log	https://app.netlify.com/sites/phillips-seldon/deploys/678faa4a458d28000852823f
😎 Deploy Preview	https://deploy-preview-478--phillips-seldon.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Zach-OfAllTrades · 2025-01-21T21:53:00Z

src/components/Search/SearchResults/SearchResults.tsx

@@ -48,7 +47,7 @@ const SearchResults = ({
                <Link
                  href={result.url}
                  onKeyDown={onKeyDown}
-                  onClick={() => closeSearch(false)}
+                  // onClick={() => closeSearch(false)}


Do we want to remove this completely? Looks to only be commented out here.

Also, how is this closed now, then? I see we are controlled the opacity now but does the search bar clear when a link is clicked or does it just stay open?

davidicus · 2025-01-22T14:17:56Z

src/components/Search/Search.tsx

@@ -203,7 +201,6 @@ const Search = ({
              >
                <li key="viewAllSearchResults" className={`${baseClassName}__result`}>
                  <Link
-                    onClick={() => showSearch(false)}


I think this is closing that search bar when clicking on one of the links in the search dropdown. I am not sure we want to remove this.

davidicus · 2025-01-22T14:19:00Z

src/components/Search/Search.tsx

@@ -96,7 +95,6 @@ const Search = ({
      e.preventDefault();
      if (value && value.length > 2) {
        const allResultsLink = encodeURLSearchParams(getAllResultsLink(value));
-        showSearch(false);


same comment about this. I would think we would want the search to close when we hit enter.

davidicus

I would like @adietrich3074 to review before letting this go as he had added some of this to fix other bugs in phillips-public

adietrich3074

I'm not sure if the removal of all the close search functionality is the solution for this. The close search functionality was added to handle bugs where a user selects a search result, navigates to the page, and then hits the back button, the search will remain open and show broken on the page. I think this issue can be solved with the solution we implemented in remix which is to debounce the results. This allows time before the search gets sent and wait for the user to finish typing as opposed to making a call to the search api every time a character is entered. I believe these repeated calls with the results returning quickly is the cause of the flashing. There is an example of how the debouncing is done in the remix project in Header.tsx

scottdickerson · 2025-01-22T15:36:19Z

src/scss/_vars.scss

@@ -103,8 +103,8 @@ $snwHeaderLink: 'snwHeaderLink';
 $snwFlyoutLink: 'snwFlyoutLink';
 $snwHeadingHero1: 'snwHeadingHero1';
 $snwHeadingHero2: 'snwHeadingHero2';
-$text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
-  $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
+$text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4,


can we undo this change? I'm guessing something about your prettier config isn't matching our repo one

scottdickerson

I don't think this should be fixed in seldon. If you look at the Remix use of the Search widget in production: https://www.phillips.com/about. I don't see the behavior that is referenced in the defect, which makes me think that there must be some approach that can be mirrored in Phillips-Public to fix this. @adietrich3074 can help out there I think.

scottdickerson · 2025-01-22T16:19:08Z

Remix.Search.Behavior.mov

SRangineni88 added 4 commits January 15, 2025 15:23

fix(search): L3-5101 Fix Search flickering on typing

fef6992

Merge branch 'main' into fix/L3-5101-Search-Bar-Flashing-and-Removes-…

681fbfa

…Typed-Search

fix(search): L3-5101 Not close search on enter or link

db87fc4

fix(search): L3-5101 Removing close logic on enter

aa60eb4

SRangineni88 requested review from davidicus, scottdickerson, adietrich3074, constantinehuzenko, aahill50 and sgrund14 as code owners January 21, 2025 14:08

SRangineni88 changed the title ~~Fix/l3 5101 search bar flashing and removes typed search~~ Fix(search):l3 5101 search bar flashing and removes typed search Jan 21, 2025

SRangineni88 changed the title ~~Fix(search):l3 5101 search bar flashing and removes typed search~~ fix(search):l3 5101 search bar flashing and removes typed search Jan 21, 2025

SRangineni88 changed the title ~~fix(search):l3 5101 search bar flashing and removes typed search~~ fix(search): L3-5101 search bar flashing and removes typed search Jan 21, 2025

Zach-OfAllTrades reviewed Jan 21, 2025

View reviewed changes

davidicus reviewed Jan 22, 2025

View reviewed changes

Zach-OfAllTrades approved these changes Jan 22, 2025

View reviewed changes

davidicus requested changes Jan 22, 2025

View reviewed changes

adietrich3074 requested changes Jan 22, 2025

View reviewed changes

scottdickerson reviewed Jan 22, 2025

View reviewed changes

scottdickerson requested changes Jan 22, 2025

View reviewed changes

SRangineni88 closed this Jan 27, 2025

scottdickerson deleted the fix/L3-5101-Search-Bar-Flashing-and-Removes-Typed-Search branch January 30, 2025 19:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(search): L3-5101 search bar flashing and removes typed search #478

fix(search): L3-5101 search bar flashing and removes typed search #478

SRangineni88 commented Jan 21, 2025 •

edited by jira bot

Loading

netlify bot commented Jan 21, 2025 •

edited

Loading

Zach-OfAllTrades Jan 21, 2025

davidicus Jan 22, 2025

davidicus Jan 22, 2025

davidicus left a comment

adietrich3074 left a comment •

edited

Loading

scottdickerson Jan 22, 2025

scottdickerson left a comment

scottdickerson commented Jan 22, 2025

fix(search): L3-5101 search bar flashing and removes typed search #478

fix(search): L3-5101 search bar flashing and removes typed search #478

Conversation

SRangineni88 commented Jan 21, 2025 • edited by jira bot Loading

netlify bot commented Jan 21, 2025 • edited Loading

✅ Deploy Preview for phillips-seldon ready!

Zach-OfAllTrades Jan 21, 2025

Choose a reason for hiding this comment

davidicus Jan 22, 2025

Choose a reason for hiding this comment

davidicus Jan 22, 2025

Choose a reason for hiding this comment

davidicus left a comment

Choose a reason for hiding this comment

adietrich3074 left a comment • edited Loading

Choose a reason for hiding this comment

scottdickerson Jan 22, 2025

Choose a reason for hiding this comment

scottdickerson left a comment

Choose a reason for hiding this comment

scottdickerson commented Jan 22, 2025

SRangineni88 commented Jan 21, 2025 •

edited by jira bot

Loading

netlify bot commented Jan 21, 2025 •

edited

Loading

adietrich3074 left a comment •

edited

Loading