shadcn/ui Combobox command 组合筛选下拉. inputOtp 光标闪烁

<Popover open={open} onOpenChange={setOpen}>
          <PopoverTrigger asChild>
            <Button
              role="combobox"
              aria-expanded={open}
              className="w-full justify-between h-11 bg-background rounded-lg search-supplier-popover"
            >
              <span className="flex items-center text-gray  text-sm">
                <Image
                  src="/images/supplier.svg"
                  alt="supplier"
                  decoding="async"
                  loading="lazy"
                  width={24}
                  height={24}
                  className="w-6 h-6 mr-2"
                ></Image>
                {searchVal ? <span className='text-white'>{searchVal}</span> : <span className='text-gray'>{t("SUPPLIER_TEXT_TIP")}</span>}
              </span>
              {open ? <BiSolidUpArrow className='text-gray w-3 h-3' /> : <BiSolidDownArrow className='text-gray w-3 h-3' />}
            </Button>
          </PopoverTrigger>
          <PopoverContent asChild className="py-0 px-2" style={{ width: pxToRem(contentWidth) }}>
            <Command className='pt-2'>
              <CommandInput
                placeholder={t("SUPPLIER_INPUT_TEXT_TIP")}
                ref={inputItemRef}
                value={inputVal}
                onValueChange={(val: string) => onValueChange(val)}
                className="h-9 text-white "
                endIconNode={inputVal ? <Image src={'/images/inputClear.svg'} width={20} height={20} alt='clear' /> : <></>}
                endIconClick={() => endIconClick()}
              />
              <CommandList className="px-2 pt-2">
                <CommandGroup className="" heading=''>
                  {filterList?.length === 0 && <CommandEmpty>{t('SUPPLIER_TEXT_TIP_NO_DATA')}.</CommandEmpty>}
                  {!inputVal && popularList?.length > 0 && (
                    <>
                      <SearchTitle title={t('SUPPLIER_LINE_TITLE_TIP')} />
                      {popularList && popularList.map((item: any) => <SearchItem key={item.id} item={item}></SearchItem>)}
                    </>
                  )}
                </CommandGroup>
                {!inputVal && searchSupplierList?.length > 0 && <SearchTitle title={t('SUPPLIER_LINE_TITLE_TIP_ALL')} />}
                <CommandGroup className="" heading=''>
                  {
                    filterList?.map((item: any) => <SearchItem key={item.id} item={item}></SearchItem>)
                  }
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover >

　　

  const SearchItem = ({ item }: any) => {
    return (
      <CommandItem
        value={item.name}
        onSelect={currentValue => onselect(currentValue)}
        className="space-y-0.5 px-0 h-8"
      >
        <div className="flex justify-between items-center flex-1">
          <span className="text-[#99A4B0]">{item.name}</span>
          <span className="text-xs text-[#FFD205]">{item.gamesNumber}</span>
        </div>
      </CommandItem>
    )
  }

　　切记name搜索的时候value写name，否则会默认搜索，打空格之后匹配不到结果

inputOtp 光标闪烁效果
https://github.com/guilhermerodz/input-otp