Возможно ли зарегистрировать свой кастомный компонент в useForm?

Question

[toster1500]

Подскажите, пожалуйста, возможно ли сделать мой собственный компонент Select таким образом, чтобы его можно было зарегистрировать в useForm так же, как обычные элементы HTML, например ?

Вот пример кода в codesanbox

import "./styles.css";
import { Controller, useForm } from "react-hook-form";
import Select, { ISelectOption } from "./Select";

const people: ISelectOption[] = [
  { id: 1, value: "1", label: "Durward Reynolds" },
  { id: 2, value: "2", label: "Kenton Towne" },
  { id: 3, value: "3", label: "Therese Wunsch" },
  { id: 4, value: "4", label: "Benedict Kessler" },
  { id: 5, value: "5", label: "Benedict Kessler" },
  { id: 6, value: "6", label: "Benedict Kessler" },
  { id: 7, value: "7", label: "Benedict Kessler" },
  { id: 8, value: "8", label: "Katelyn Rohan" }
];

export default function App() {
  const { control, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data.Select);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Select
        options={people}
        name="Select"
        defaultText="Select"
        required
        placeholder="Select placeholder"
        control={control}
        Controller={Controller}
        defaultValue={people[2].value}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

import { ChangeEvent, FC, useEffect, useMemo, useRef, useState } from "react";
import { Listbox } from "@headlessui/react";
import { Control, ControllerProps, FieldValues } from "react-hook-form";

export interface ISelectOption {
  id: number | string;
  value: string | number;
  label: string;
}

interface ISelect {
  name: string;
  classes?: string;
  disabled?: boolean;
  required?: boolean;
  defaultText: string;
  placeholder?: string;
  options: ISelectOption[];
  control: Control<FieldValues, any>;
  defaultValue?: ISelectOption["value"];
  Controller: FC<ControllerProps<FieldValues, string>>;
}

const Select: FC<ISelect> = ({
  control,
  Controller,
  required,
  name,
  defaultText,
  disabled,
  classes,
  options,
  placeholder,
  defaultValue
}) => {
  const selectRef = useRef<HTMLDivElement>(null);

  const defaultOption = useMemo(
    () =>
      defaultValue
        ? options.find((option) => option.value === defaultValue)
        : options[0],
    [defaultValue, options]
  );

  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [selectedOptionValue, setSelectedOptionValue] = useState<
    ISelectOption["value"] | null
  >(defaultValue ?? "");
  const [selectedOption, setSelectedOption] = useState<ISelectOption | null>(
    defaultOption
  );
  const [searchValue, setSearchValue] = useState("");

  const filteredOptions = useMemo(
    () =>
      options.filter(({ label }) =>
        label.toLowerCase().includes(searchValue.toLowerCase())
      ),
    [options, searchValue]
  );

  const shouldShowSearch = options.length > 5;

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        selectRef.current &&
        !selectRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [selectRef]);

  const onSelectOption = (option: ISelectOption) => {
    setIsOpen(false);
    setSelectedOptionValue(option.value);
    setSelectedOption(option);
  };

  return (
    <Controller
      name={name}
      control={control}
      rules={{ required: !defaultValue && required }}
      defaultValue={defaultValue ? defaultOption : null}
      render={({
        field: { onChange, value },
        fieldState: { error },
        formState
      }) => (
        <div
          className={`select form-label ${isOpen ? "--open" : ""} ${
            classes ?? ""
          } ${disabled ? "--disabled" : ""} ${error ? "--error" : ""}`}
          ref={selectRef}
        >
          {placeholder && (
            <span className="form-label__placeholder">{placeholder}:</span>
          )}
          <Listbox value={value} onChange={(value) => onChange(value)}>
            <Listbox.Button onClick={() => setIsOpen(!isOpen)}>
              <p>{selectedOptionValue ? selectedOption?.label : defaultText}</p>
              <i className="icon icon-arrow"></i>
            </Listbox.Button>
            <Listbox.Options>
              {shouldShowSearch && (
                <label className="select__search">
                  <input
                    value={searchValue}
                    placeholder="Search..."
                    onChange={(event: ChangeEvent<HTMLInputElement>) =>
                      setSearchValue(event.target.value)
                    }
                  />
                  <i className="icon icon-search" />
                </label>
              )}
              {filteredOptions.length > 0 ? (
                filteredOptions.map(({ id, value, label }: ISelectOption) => (
                  <Listbox.Option
                    key={id}
                    value={{ id, value, label }}
                    onClick={() => onSelectOption({ id, value, label })}
                    className={
                      selectedOptionValue === value ? "--selected" : ""
                    }
                  >
                    {label}
                  </Listbox.Option>
                ))
              ) : (
                <li className="select__not-results">No results found</li>
              )}
            </Listbox.Options>
          </Listbox>
        </div>
      )}
    />
  );
};

export default Select;

Answer 1

[Mikhail Osher]

Выглядит, как взять register из useForm, и прокинуть его через контекст всем дочерним компонентам, чтобы они в свою очередь вызывали register для нужных компонентов.

Comments

[toster1500]

да, но проблема в том, что это не стандартный html элемент как input, textarea, select... а кастомный компонент из библиотеки headlessui

[Mikhail Osher]

toster1500, да это по барабану вообще. Смотрите API функции register и дальше додумывайте, кого куда передать. Решать задачу за Вас тут никто не будет.

[toster1500]

Mikhail Osher, та уже несколько часов кручусь с этим, нефига нормального не получается, пытаюсь сделать так что бы можно было удобно этот компонент Select использовать в разных формах...

[toster1500]

Mikhail Osher, я раньше через useEffect перечислял все поля, регистрировал их, потом из компонента брял onChange и складывал в setValue, может есть какой-то способ по лучше, что бы он работает как с обычными html компонентами

[Mikhail Osher]

Посмотрите внимательно, что возвращает register.

[toster1500]

Mikhail Osher, если знаете, можете дать пожалуйста пример как-то это делать или подсказать, над документацией я давно уже сижу, и если бы знал как сделать не спрашивал бы на форуме...

[Mikhail Osher]

toster1500,

const MySelect = ({ name, options }) => {
  const register = useContext(MyFormContextRegister)
  return (
    <select {...register(name)}>
      {options.map((option, index) => 
        <option key={index} value={option.value}>{option.title}</option>)
      }
    </select>
  )
}

const MyForm = () => {
  const { register, handleSubmit } = useForm()
  return (
    <MyFormContextRegister.Provider value={register}>
      <form onSubmit={handleSubmit}>
        <MySelect name="select-name" options={[{title: 'foo', value: 'bar'}]} />
      </form>
    </MyFormContextRegister.Provider>
  )
}

[toster1500]

Mikhail Osher, если бы я использовал дефолтный селект от html то не было бы проблем с использованием его в useForm совсем