Merge pull request #1235 from dpc-sdp/bugfix/R20-1451-search-max-chars

[R20-1451] Added missing debouncing to suggestions and limit to 128 chars
dpc-sdp · Jun 25, 2024 · 149d8cb · 149d8cb
2 parents 701bf24 + cfac365
commit 149d8cb
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 3 deletions.
diff --git a/examples/nuxt-app/test/features/search-listing/suggestions.feature b/examples/nuxt-app/test/features/search-listing/suggestions.feature
@@ -45,3 +45,12 @@ Feature: Search listing - Suggestions
 
     When I type "The" into the search input
     Then the search suggestions should not be displayed
+
+  @mockserver
+  Example: Search bar max input length
+    Given the page endpoint for path "/suggestions" returns fixture "/search-listing/suggestions/page-suggestions" with status 200
+    And the search network request is stubbed with fixture "/search-listing/suggestions/search-response" and status 200
+    And the search autocomplete request is stubbed with "/search-listing/suggestions/response" fixture
+
+    When I visit the page "/suggestions"
+    Then the search input should be have a max length of 128
diff --git a/examples/nuxt-app/test/features/site/search.feature b/examples/nuxt-app/test/features/site/search.feature
@@ -26,3 +26,9 @@ Feature: Site search
     When I clear the search filters
     Then the filters toggle should show 0 applied filters
     And the search input should have the value ""
+
+  @mockserver
+  Example: Search bar max input length
+    Given the "/api/tide/search/**" network request is stubbed with fixture "/site/search-response" and status 200 as alias "siteSearchReq"
+    When I visit the page "/search"
+    Then the search input should be have a max length of 128
diff --git a/packages/ripple-test-utils/step_definitions/content-types/listing.ts b/packages/ripple-test-utils/step_definitions/content-types/listing.ts
@@ -407,6 +407,19 @@ Then('the search form should be hidden', () => {
   cy.get(`.tide-search-header`).should('not.exist')
 })
 
+Then(
+  'the search input should be have a max length of {int}',
+  (maxLength: number) => {
+    cy.get(`.rpl-search-bar input`).should('have.attr', 'maxlength', maxLength)
+
+    cy.get(`.rpl-search-bar input`).type(new Array(maxLength + 5).join('A'))
+    cy.get(`.rpl-search-bar input`).should(
+      'have.value',
+      new Array(maxLength + 1).join('A')
+    )
+  }
+)
+
 Then('only the search filters should be visible', () => {
   cy.get(`.tide-search-header .rpl-search-bar`).should('not.exist')
   cy.get(`.tide-search-header .rpl-search-bar-refine`).should('not.exist')

diff --git a/packages/ripple-tide-search/components/TideSearchListingPage.vue b/packages/ripple-tide-search/components/TideSearchListingPage.vue
@@ -7,6 +7,7 @@ import {
   computed
 } from '#imports'
 import { submitForm } from '@formkit/vue'
+import { useDebounceFn } from '@vueuse/core'
 import useTideSearch from './../composables/useTideSearch'
 import type { TidePageBase, TideSiteData } from '@dpc-sdp/ripple-tide-api/types'
 import type {
@@ -267,7 +268,10 @@ const handleFilterReset = (event: rplEventPayload) => {
 
 const handleUpdateSearchTerm = (term: string) => {
   searchTerm.value.q = term
+  getDebouncedSuggestions(term)
+}
 
+const getDebouncedSuggestions = useDebounceFn((term: string) => {
   if (
     props.autocompleteQuery &&
     props.searchListingConfig?.suggestions?.enabled !== false
@@ -278,7 +282,7 @@ const handleUpdateSearchTerm = (term: string) => {
       clearSuggestions()
     }
   }
-}
+}, 300)
 
 const handleUpdateSearch = (term: string | Record<string, any>) => {
   if (term && typeof term === 'object') {
@@ -404,6 +408,7 @@ watch(
               :placeholder="searchListingConfig?.labels?.placeholder"
               :suggestions="suggestions"
               :global-events="false"
+              :maxlength="128"
               @submit="handleSearchSubmit"
               @update:input-value="handleUpdateSearchTerm"
             />

diff --git a/packages/ripple-tide-search/components/global/TideCustomCollection.vue b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
@@ -6,6 +6,7 @@ import {
   ref
 } from '#imports'
 import { submitForm } from '@formkit/vue'
+import { useDebounceFn } from '@vueuse/core'
 import useTideSearch from './../../composables/useTideSearch'
 import type {
   TideSearchListingResultItem,
@@ -364,14 +365,17 @@ const handleFilterReset = (event: rplEventPayload) => {
 
 const handleUpdateSearchTerm = (term: string) => {
   searchTerm.value.q = term
+  getDebouncedSuggestions()
+}
 
+const getDebouncedSuggestions = useDebounceFn(() => {
   if (
     props.autocompleteQuery &&
     props.searchListingConfig?.suggestions?.enabled !== false
   ) {
     getSuggestions()
   }
-}
+}, 300)
 
 const handleUpdateSearch = (term: string | Record<string, any>) => {
   if (term && typeof term === 'object') {
@@ -564,6 +568,7 @@ const locationOrGeolocation = computed(() => {
           :inputValue="searchTerm.q"
           :placeholder="searchListingConfig.labels?.placeholder"
           :global-events="false"
+          :maxlength="128"
           @submit="handleSearchSubmit"
           @update:input-value="handleUpdateSearchTerm"
         />

diff --git a/packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue b/packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue
@@ -11,7 +11,6 @@
       "
       :suggestions="results"
       :showNoResults="true"
-      :debounce="5000"
       :maxSuggestionsDisplayed="8"
       :placeholder="placeholder"
       :getOptionId="(itm:any) => itm?.id || itm?.name"