diff --git a/packages/ripple-tide-search/components/TideSearchPage.vue b/packages/ripple-tide-search/components/TideSearchPage.vue index a06d266d84..ca16ee4749 100644 --- a/packages/ripple-tide-search/components/TideSearchPage.vue +++ b/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" /> diff --git a/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.vue b/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.vue index 8a14f634c3..9b1868a336 100644 --- a/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.vue +++ b/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.vue @@ -34,6 +34,7 @@ interface Props { items: IRplPrimaryNavItem[] showSearch?: boolean searchUrl?: string + searchMaxLength?: number showQuickExit?: boolean } @@ -41,7 +42,8 @@ const props = withDefaults(defineProps(), { 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" /> diff --git a/packages/ripple-ui-core/src/components/primary-nav/components/search-form/RplPrimaryNavSearchForm.vue b/packages/ripple-ui-core/src/components/primary-nav/components/search-form/RplPrimaryNavSearchForm.vue index 6fd777c769..552be6b804 100644 --- a/packages/ripple-ui-core/src/components/primary-nav/components/search-form/RplPrimaryNavSearchForm.vue +++ b/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(), {}) +const props = withDefaults(defineProps(), { + 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" />