A combobox with an icon addon

<script setup lang="ts">
/**
 * `InputGroupAddon`/`InputGroupInput` вне области порта (только
 * `select`/`combobox`), поэтому дополнительный addon-слот с иконкой
 * инлайнен буквально теми же классами, что и в `ComboboxInput.vue`
 * (см. `packages/ui/src/ui/combobox/variants.ts` для их происхождения).
 */
import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox"
import { Field } from "@/components/ui/field"

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]

function focusInputUnlessButton(event: MouseEvent) {
  const target = event.target as HTMLElement
  if (target.closest("button")) return
  ;(event.currentTarget as HTMLElement).parentElement?.querySelector("input")?.focus()
}
</script>

<template>
  <Field class="max-w-xs">
    <Combobox>
      <ComboboxInput placeholder="Select a framework">
        <div
          data-slot="input-group-addon"
          role="group"
          data-align="inline-start"
          class="cn-input-group-addon flex cursor-text items-center justify-center select-none cn-input-group-addon-align-inline-start order-first"
          @click="focusInputUnlessButton"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="text-muted-foreground size-4"
          >
            <circle cx="12" cy="12" r="10" />
            <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
            <path d="M2 12h20" />
          </svg>
        </div>
      </ComboboxInput>
      <ComboboxContent>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          <ComboboxItem v-for="item in frameworks" :key="item" :value="item">
            {{ item }}
          </ComboboxItem>
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  </Field>
</template>