Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Check for isTouched before opening search suggestions #1122

Merged
merged 5 commits into from
Apr 19, 2024

Conversation

ataker
Copy link
Contributor

@ataker ataker commented Apr 17, 2024

Chromatic

https://dst2676-search-suggestions--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

Closes Search Typeahead component does not close as expected when the component loads with a value prefilled #2676

Do not open search suggestions if the search hasn't been touched.. This would happen if the search was filled on load.
To test:

  1. Publish this web-components to Verdaccio
  2. Switch vets-website to branch 17176-search-results-wc
  3. In vets-website, set web-components to the build you published to Verdaccio
  4. Test

QA Checklist

  • Component maintains 1:1 parity with design mocks
  • Text is consistent with what's been provided in the mocks
  • Component behaves as expected across breakpoints
  • Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
  • Designer has signed off on changes (if applicable. If not applicable provide reason why)
  • Tab order and focus state work as expected
  • Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
  • New components are covered by e2e tests; updates to existing components are covered by existing test suite
  • Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Before
https://github.com/department-of-veterans-affairs/component-library/assets/1413938/672b384c-5431-4d95-ab66-87219b639ab2

After
https://github.com/department-of-veterans-affairs/component-library/assets/1413938/851ea977-14c2-4277-86e3-1560424a70d3

Acceptance criteria

  • QA checklist has been completed
  • Screenshots have been attached that cover desktop and mobile screens

Definition of done

  • Documentation has been updated, if applicable
  • A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

@ataker ataker added the patch Patch change in semantic versioning label Apr 17, 2024
@ataker ataker requested a review from a team as a code owner April 17, 2024 14:56
Copy link
Contributor

@powellkerry powellkerry left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@@ -439,7 +452,7 @@ export class VaSearchInput {
return (
<Host onBlur={handleBlur}>
<form class={formClasses} role="search">
<label class="usa-sr-only" htmlFor="search-field">{label}</label>
<label class="usa-sr-only kokokok" htmlFor="search-field">{label}</label>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is "kokokok" just a leftover thing from testing?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoops XD

// only open the listbox after the search input has been touched
this.isListboxOpen = false;
return
}
this.isListboxOpen = true;
Copy link
Contributor

@jamigibbs jamigibbs Apr 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a minor thing here but would a ternary simplify this logic or would that make it less readable?

this.isTouched ? this.isListBoxOpen = true : this.isListboxOpen = false;

Copy link
Contributor

@jamigibbs jamigibbs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, Alex! Thank you for digging into this one! 👍

@ataker ataker merged commit a8dccee into main Apr 19, 2024
22 checks passed
@ataker ataker deleted the dst2676-search-suggestions branch April 19, 2024 15:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
patch Patch change in semantic versioning
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Search Typeahead component does not close as expected when the component loads with a value prefilled
4 participants