feat: improve customizability of Combobox component

src/components/ComboBox.vue

@@ -34,7 +34,7 @@
         role="combobox"
         tabindex="0"
         type="text"
-        class="tw-text-inherit tw-order-last"
+        class="[&:not(.form-control)]:tw-text-inherit tw-order-last"
         :class="inputClass"
         @keydown.up.prevent
         @keydown.down.prevent
@@ -80,17 +80,19 @@
           drawerClass,
           {
             'tw-fixed tw-left-2 tw-right-2 tw-z-20 tw-mt-2 tw-bg-white tw-shadow-2xl tw-rounded tw-flex tw-flex-col tw-overflow-hidden': true,
-            'md:tw-absolute md:tw-w-fit md:tw-flex-row': true,
+            'md:tw-absolute md:tw-w-80 md:tw-flex-row': true,
           },
         ]"
       >
-        <div class="tw-order-2 tw-flex-none tw-p-6 tw-bg-gray-100 md:tw-w-80">
+        <div class="tw-order-2 tw-flex-none tw-p-6 tw-bg-gray-100 tw-w-full">
           <ul
             v-if="choices.length > 0"
             ref="choicesEl"
             role="listbox"
-            class="tw-max-h-96 tw-overflow-y-auto tw-block tw-p-0 tw-m-0"
+            class="tw-overflow-y-auto tw-block tw-p-0 tw-m-0 tw-max-h-96"
+            :class="choiceListClass"
             :aria-activedescendant="activeResultId"
+            tabindex="-1"
           >
             <template v-for="(choice, index) in choices" :key="getKey(choice)">
               <slot
@@ -137,6 +139,7 @@ export type ComboBoxProps<T> = {
   closeOnSelect?: boolean
   inputClass?: unknown
   inputContainerClass?: unknown
+  choiceListClass?: unknown
   keyboardShortcutClass?: unknown
   labelClass?: unknown
   drawerClass?: unknown
@@ -200,6 +203,7 @@ const props = withDefaults(defineProps<ComboBoxProps<T>>(), {
   inputContainerClass: undefined,
   keyboardShortcutClass: undefined,
   drawerClass: undefined,
+  choiceListClass: undefined,
 })
 const emit = defineEmits<{
   (e: 'search', value: string): void