Merge pull request #1208 from dpc-sdp/bugfix/R20-1451-search-ui-max-l…

…ength

[R20-1451] - Set a max length on site search bar to match search ui max length

packages/ripple-tide-search/components/TideSearchPage.vue

@@ -237,6 +237,7 @@ watch(
             :inputValue="searchState.searchTerm"
             :suggestions="searchTermSuggestions"
             :global-events="false"
+            maxlength="128"
             @submit="handleSubmit"
             @update:input-value="updateSearchTerm"
           />

packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.vue

@@ -34,14 +34,16 @@ interface Props {
   items: IRplPrimaryNavItem[]
   showSearch?: boolean
   searchUrl?: string
+  searchMaxLength?: number
   showQuickExit?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   secondaryLogo: undefined,
   showSearch: true,
   searchUrl: '/search',
-  showQuickExit: true
+  showQuickExit: true,
+  searchMaxLength: 128
 })
 
 const emit = defineEmits<{
@@ -303,6 +305,7 @@ provide('navFocus', navFocus)
         v-if="isSearchActive"
         :show-quick-exit="showQuickExit"
         :search-url="searchUrl"
+        :max-length="searchMaxLength"
       />
     </div>
     <RplPrimaryNavQuickExit v-if="showQuickExit" variant="fixed" />

packages/ripple-ui-core/src/components/primary-nav/components/search-form/RplPrimaryNavSearchForm.vue

@@ -6,11 +6,14 @@ import { ref, onMounted } from 'vue'
 interface Props {
   showQuickExit: boolean
   searchUrl: boolean
+  maxLength?: number
 }
 
 const searchBar = ref(null)
 
-const props = withDefaults(defineProps<Props>(), {})
+const props = withDefaults(defineProps<Props>(), {
+  maxLength: 128
+})
 
 const handleSubmit = (event) => {
   window.location.href = `${props.searchUrl}?q=${event.value}`
@@ -38,6 +41,7 @@ onMounted(() => {
         ref="searchBar"
         variant="menu"
         placeholder="Start typing..."
+        :maxlength="maxLength"
         @submit="handleSubmit"
       />
     </div>