SelectItem

List row (<li>) with an active/highlighted state, for building option lists inside BaseDropDown.

import SelectItem from "@wikicasa-dev/components/UIKit/BaseSelect/SelectItem";

A building block for the panel of a BaseDropDown: it renders an <li> that highlights when active and moves keyboard focus onto itself, so arrow-key navigation is visible. ClearableAutocomplete (and the legacy BaseAutocomplete) use it internally. If you just need a select field use AccessibleSelect; use SelectItem only when composing a custom menu or list.

Content: the default slot (slot prop itemIdx), or the label prop (HTML allowed) if no slot is given. click and mouseover emit the item's idx.

#Usage

<script setup lang="ts">
import BaseDropDown from "@wikicasa-dev/components/UIKit/BaseDropDown";
import SelectItem from "@wikicasa-dev/components/UIKit/BaseSelect/SelectItem";

const languages = [
  { code: "it", label: "Italiano" },
  { code: "en", label: "English" },
];
const changeLanguage = (code: string) => console.log("lang", code);
</script>

<template>
  <BaseDropDown btn-label="Italiano" with-arrow-icon direction="up" dropdown-element="ul">
    <template #default="{ activeIdx, setActiveIdx, toggleDropdown }">
      <SelectItem
        v-for="(lang, idx) in languages"
        :key="lang.code"
        :idx="idx"
        :label="lang.label"
        :active="activeIdx === idx"
        @mouseover="setActiveIdx"
        @click="changeLanguage(lang.code); toggleDropdown()"
        @keydown.enter="changeLanguage(lang.code)"
      />
    </template>
  </BaseDropDown>
</template>

#Do / Don't

• Do render it as a direct child of a ul/ol (dropdown-element="ul" on BaseDropDown).
• Do pass idx and bind active to the dropdown's activeIdx, updating it on mouseover.
• Do set :focus-on-active="false" when active is driven only by the pointer (e.g. next to a text input on mobile): focusing the item would steal focus and close the soft keyboard.
• Don't use it outside a list; it is an <li>.

#Styling hooks

• Active rows get the class active, data-active="true" and a light (w-cultured) background.
• class is applied to the <li>; use it for padding, radius and cursor.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
label	string	""
active	boolean	false
idx	number	-1
focusOnActive	boolean	true		Whether becoming active should move real DOM focus onto the item. Focus exists here to serve keyboard navigation. Consumers that drive active from pointer events alone (touch synthesises mouseover before click) should turn this off: focusing the item runs scroll-into-view against every scrollable ancestor and blurs whatever held focus - on mobile that dismisses the soft keyboard, and both cost a forced layout before the tap is even processed.

Events

Name	Payload
click	[number]
mouseover	[number]

v-model

None.

Slots

Name	Slot props
default	{ itemIdx: number; }

Exposed (template ref)

None.