Shadcn UI command как можно отследить клик и нажатие enter, focus у CommandItem?

Question

[linoa123]

import {
	Command,
	CommandGroup,
	CommandItem,
	CommandList,
} from '@/components/ui/command';
import { Input } from '@/components/ui/input';

export default function CommandDemo() {
	return (
		<Command className='rounded-lg border shadow-md md:min-w-[450px]'>
			<Input />

			<CommandList>
				<CommandGroup>
					<CommandItem>
						<span>Calendar</span>
					</CommandItem>
					<CommandItem>
						<span>Search Emoji</span>
					</CommandItem>
					<CommandItem>
						<span>Calculator</span>
					</CommandItem>
				</CommandGroup>
			</CommandList>
		</Command>
	);
}

Answer 1

[Михаил Р.]

Например:

export default function CommandDemo() {
    const handle = (msg) => console.log(msg);

    const handleKeyDown = (e) => {
        if (e.key === 'Enter') console.log('Нажат Enter');
    }

    return (
        <Command className="rounded-lg border shadow-md md:min-w-[450px]">
          <Input/>
          
          <CommandList>
              <CommandGroup>
                  <CommandItem
                      onClick={() => handle('Клик')}
                      onFocus={() => handle('Фокус')}
                      onKeyDown={(e) => handleKeyDown(e)}
                  >
                      <span>Поиск Emoji</span>
                  </CommandItem>
              </CommandGroup>
          </CommandList>
      </Command>
    );
}