Combobox

Copyimport { tracked } from '@glimmer/tracking';
import Component from '@glimmer/component';
import { Button } from '@/ui/button';
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/ui/command';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/ui/popover';
 
const frameworks = [
  { value: 'next.js', label: 'Next.js' },
  { value: 'sveltekit', label: 'SvelteKit' },
  { value: 'nuxt.js', label: 'Nuxt.js' },
  { value: 'remix', label: 'Remix' },
  { value: 'astro', label: 'Astro' },
];
 
export default class ExampleCombobox extends Component {
  @tracked open = false;
  @tracked value = '';
 
  get selectedLabel() {
    const framework = frameworks.find((f) => f.value === this.value);
    return framework?.label || 'Select framework...';
  }
 
  handleSelect = (currentValue: string) => {
    this.value = currentValue === this.value ? '' : currentValue;
    this.open = false;
  };
 
  <template>
    <Popover @open={{this.open}} @onOpenChange={{(fn (mut this.open))}}>
      <PopoverTrigger>
        <Button
          @variant="outline"
          role="combobox"
          aria-expanded={{this.open}}
          @class="w-[200px] justify-between"
        >
          {{this.selectedLabel}}
        </Button>
      </PopoverTrigger>
      <PopoverContent @class="w-[200px] p-0">
        <Command>
          <CommandInput @placeholder="Search framework..." />
          <CommandList>
            <CommandEmpty>No framework found.</CommandEmpty>
            <CommandGroup>
              {{#each frameworks as |framework|}}
                <CommandItem
                  @value={{framework.value}}
                  @onSelect={{this.handleSelect}}
                >
                  {{framework.label}}
                </CommandItem>
              {{/each}}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  </template>
}