can't input chinese

[tjx666]

should auto remove the letters before the chinese I input.

2022-08-10.20.30.55.mov

[JaeSeoKim]

The same error occurs in the environment below.

// ...
    "next": "12.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
// ...

Errors occur not only in Chinese, but also in CJK(Chines, Japanese, Korean )language, multi byte languages.
The cause seems to be a problem with the synthesis event in React.

This code is a simple correction to the error.

// KBarSearch.tsx
import { useKBar, VisualState } from "kbar";
import React, { useState } from "react";

export const KBAR_LISTBOX = "kbar-listbox";
export const getListboxItemId = (id: number) => `kbar-listbox-item-${id}`;

export function KBarSearch(
  props: React.InputHTMLAttributes<HTMLInputElement> & {
    defaultPlaceholder?: string;
  },
) {
  const { query, searchQuery, actions, currentRootActionId, activeIndex, showing, options } =
    useKBar(state => ({
      searchQuery: state.searchQuery,
      currentRootActionId: state.currentRootActionId,
      actions: state.actions,
      activeIndex: state.activeIndex,
      showing: state.visualState === VisualState.showing,
    }));
  const [search, setSearch] = useState(searchQuery);

  const ownRef = React.useRef<HTMLInputElement>(null);

  const { defaultPlaceholder, ...rest } = props;

  React.useEffect(() => {
    query.setSearch("");
    ownRef.current!.focus();
    return () => query.setSearch("");
  }, [currentRootActionId, query]);

  React.useEffect(() => {
    query.setSearch(search);
  }, [query, search]);

  const placeholder = React.useMemo((): string => {
    const defaultText = defaultPlaceholder ?? "Type a command or search…";
    return currentRootActionId && actions[currentRootActionId]
      ? actions[currentRootActionId].name
      : defaultText;
  }, [actions, currentRootActionId, defaultPlaceholder]);

  return (
    <input
      {...rest}
      ref={ownRef}
      autoFocus
      autoComplete="off"
      role="combobox"
      spellCheck="false"
      aria-expanded={showing}
      aria-controls={KBAR_LISTBOX}
      aria-activedescendant={getListboxItemId(activeIndex)}
      value={search}
      placeholder={placeholder}
      onChange={event => {
        props.onChange?.(event);
        setSearch(event.target.value);
        options?.callbacks?.onQueryChange?.(event.target.value);
      }}
      onKeyDown={event => {
        props.onKeyDown?.(event);
        if (currentRootActionId && !search && event.key === "Backspace") {
          const parent = actions[currentRootActionId].parent;
          query.setCurrentRootAction(parent);
        }
      }}
    />
  );
}

[raRaRa]

Same with some icelandic letters, e.g. if I want to type á, then I first type ´ and then a to get á. For some reason this fails in kbar. The result will be: ´a

[bepyan]

Same issue with korean.
Above solution will work, but not with "kbar": ^0.1.0-beta.39

Invariant failed: Input is undefined, make sure you apple `query.inputRefSetter` to your search input.

and this will work!

// KBarSearch.tsx
import { useKBar, VisualState } from 'kbar';
import * as React from 'react';

export const KBAR_LISTBOX = 'kbar-listbox';
export const getListboxItemId = (id: number) => `kbar-listbox-item-${id}`;

export function KBarSearch(
  props: React.InputHTMLAttributes<HTMLInputElement> & {
    defaultPlaceholder?: string;
  },
) {
  const { query, searchQuery, actions, currentRootActionId, activeIndex, showing, options } =
    useKBar((state) => ({
      searchQuery: state.searchQuery,
      currentRootActionId: state.currentRootActionId,
      actions: state.actions,
      activeIndex: state.activeIndex,
      showing: state.visualState === VisualState.showing,
    }));
  const [search, setSearch] = React.useState(searchQuery);

  const { defaultPlaceholder, ...rest } = props;

  React.useEffect(() => {
    query.setSearch('');
    query.getInput().focus();
    return () => query.setSearch('');
  }, [currentRootActionId, query]);

  React.useEffect(() => {
    query.setSearch(search);
  }, [query, search]);

  const placeholder = React.useMemo((): string => {
    const defaultText = defaultPlaceholder ?? 'Type a command or search…';
    return currentRootActionId && actions[currentRootActionId]
      ? actions[currentRootActionId].name
      : defaultText;
  }, [actions, currentRootActionId, defaultPlaceholder]);

  return (
    <input
      {...rest}
      ref={query.inputRefSetter}
      autoFocus
      autoComplete="off"
      role="combobox"
      spellCheck="false"
      aria-expanded={showing}
      aria-controls={KBAR_LISTBOX}
      aria-activedescendant={getListboxItemId(activeIndex)}
      value={search}
      placeholder={placeholder}
      onChange={(event) => {
        props.onChange?.(event);
        setSearch(event.target.value);
        options?.callbacks?.onQueryChange?.(event.target.value);
      }}
      onKeyDown={(event) => {
        props.onKeyDown?.(event);
        if (currentRootActionId && !search && event.key === 'Backspace') {
          const parent = actions[currentRootActionId].parent;
          query.setCurrentRootAction(parent);
        }
      }}
    />
  );
}

[stale]

Hey! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.