Function SearchBox

apps/web/ui/Typesense/ui/SearchBox/index.tsx:139–214

({
  formRef,
  inputRef,
  isSearchStalled,
  onChange,
  onReset,
  onSubmit,
  placeholder,
  value,
  autoFocus,
  resetIconComponent: ResetIcon = DefaultResetIcon,
  submitIconComponent: SubmitIcon = DefaultSubmitIcon,
  loadingIconComponent: LoadingIcon = DefaultLoadingIcon,
  classNames = {},
  translations,
  ...props
}: SearchBoxProps)

}

export function SearchBox({
  formRef,
  inputRef,
  isSearchStalled,
  onChange,
  onReset,
  onSubmit,
  placeholder,
  value,
  autoFocus,
  resetIconComponent: ResetIcon = DefaultResetIcon,
  submitIconComponent: SubmitIcon = DefaultSubmitIcon,
  loadingIconComponent: LoadingIcon = DefaultLoadingIcon,
  classNames = {},
  translations,
  ...props
}: SearchBoxProps) {
  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    event.stopPropagation();

    if (onSubmit) {
      onSubmit(event);
    }

    if (inputRef.current) {
      inputRef.current.blur();
    }
  }

  function handleReset(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    event.stopPropagation();

    onReset(event);

    if (inputRef.current) {
      inputRef.current.focus();
    }
  }

  return (
    <div
      {...props}
      className={cx(styles.container, classNames.root, props.className)}
    >
      <form
        ref={formRef}
        action=""
        className={cx(classNames.form)}
        noValidate
        onSubmit={handleSubmit}
        onReset={handleReset}
      >
        <TextInput
          className={styles.input}
          id="search"
          inputRef={inputRef}