From c75422091f53b17b7737124d5e9eeba674fa2a33 Mon Sep 17 00:00:00 2001
From: Jason Smith <jason.smith@dpc.vic.gov.au>
Date: Tue, 31 Oct 2023 12:56:12 +1100
Subject: [PATCH] refactor(@dpc-sdp/ripple-ui-core): :recycle: rework as
 function props

---
 .../components/search-bar/RplSearchBar.vue    | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.vue b/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.vue
index c4198a2242..889e338d08 100644
--- a/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.vue
+++ b/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.vue
@@ -25,6 +25,8 @@ interface Props {
   placeholder?: string
   globalEvents?: boolean
   showNoResults?: boolean
+  getOptionLabel?: Function
+  isOptionSelectable?: Function
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -37,7 +39,9 @@ const props = withDefaults(defineProps<Props>(), {
   suggestions: () => [],
   maxSuggestionsDisplayed: 10,
   placeholder: undefined,
-  globalEvents: true
+  globalEvents: true,
+  getOptionLabel: (opt) => opt.toString(),
+  isOptionSelectable: (opt) => true
 })
 
 const emit = defineEmits<{
@@ -289,38 +293,35 @@ const slug = (label: string) => label.toLowerCase().replace(/[^\w-]+/g, '-')
       >
         <div
           v-for="option in suggestions"
-          :id="slug(option.label || option)"
-          :key="`opt-${slug(option.label || option)}`"
+          :id="slug(getOptionLabel(option))"
+          :key="`opt-${slug(getOptionLabel(option))}`"
           ref="optionRefs"
-          :data-option-id="option.label || option"
-          :role="option?.type && option.type !== 'category' ? 'option' : null"
+          :data-option-id="getOptionLabel(option)"
+          :role="isOptionSelectable(option) ? 'option' : null"
           :class="{
             'rpl-search-bar__menu-option': true,
             'rpl-u-focusable-block': true,
             'rpl-u-focusable--force-on': isMenuItemKeyboardFocused(
-              slug(option.label || option)
+              slug(getOptionLabel(option))
             )
           }"
-          tabindex="-1"
+          :tabindex="isOptionSelectable(option) ? '0' : '-1'"
           @keydown.space.prevent="
-            option?.type &&
-              option.type !== 'category' &&
-              handleSelectOption(option.label || option, true)
+            isOptionSelectable(option) &&
+              handleSelectOption(getOptionLabel(option), true)
           "
           @keydown.enter.prevent="
-            option?.type &&
-              option.type !== 'category' &&
-              handleSelectOption(option.label || option, true)
+            isOptionSelectable(option) &&
+              handleSelectOption(getOptionLabel(option), true)
           "
           @click="
-            option?.type &&
-              option.type !== 'category' &&
-              handleSelectOption(option.label || option, false)
+            isOptionSelectable(option) &&
+              handleSelectOption(getOptionLabel(option), false)
           "
-          @keydown="option?.type && option.type !== 'category' && handleKeydown"
+          @keydown="isOptionSelectable(option) && handleKeydown"
         >
           <slot name="suggestion" :option="{ option }">
-            {{ option.label || option }}
+            {{ getOptionLabel(option) }}
           </slot>
         </div>
       </div>