Как исправить ошибку при работе с кастомным select и библеотекой react-hook-form?

Question

[Дмитрий Путилов]

Всем привет, делаю форму для фильтрации и столкнулся вот с такой вот ошибкой


Пишу на Next

Вот код самой формы

import { motion } from "framer-motion";
import { FC } from "react";
import { Controller, useForm } from "react-hook-form";
import { CustomSelect } from "@entities/filter";
import { CloseIcon } from "@shared/images";
import { EnumVariants } from "@shared/types/EnumVariants";
import { Button } from "@shared/ui";
import { OptionsCategories, OptionsStatus } from "../../mock";
import classes from "./FilterForm.module.scss";

interface IFilterFormProps {
  close: VoidFunction;
}

const initialFilterAnimate = {
  x: 100,
  opacity: 0,
};
const animFilterAnimate = {
  x: 0,
  opacity: 1,
};
const exitFilterAnimate = {
  x: 100,
  opacity: 0,
};

export const FilterForm: FC<IFilterFormProps> = ({ close }) => {
  const { handleSubmit, control } = useForm();

  const handlerForm = () => {
    // Обработка
  };

  return (
    <motion.div
      initial={initialFilterAnimate}
      animate={animFilterAnimate}
      exit={exitFilterAnimate}
      className={classes.filterForm}
    >
      <div className={classes.header}>
        <h1>Фильтры</h1>
        <CloseIcon onClick={close} className={classes.closeIcon} />
      </div>

      <form onSubmit={handleSubmit(handlerForm)}>
        <Controller
          render={({ field }) => (
            <CustomSelect
              className={classes.select}
              options={OptionsStatus}
              {...field}
            />
          )}
          name="name"
          control={control}
        />

        <Controller
          render={({ field }) => (
            <CustomSelect
              className={classes.select}
              options={OptionsCategories}
              {...field}
            />
          )}
          name="name_2"
          control={control}
        />

        <Button className={classes.buttonAction} variant={EnumVariants.primary}>
          Применить
        </Button>

        <Button className={classes.buttonAction}>Отмена</Button>
      </form>
    </motion.div>
  );
};

А вот моего кастомного Select

import cs from "classnames";
import { AnimatePresence } from "framer-motion";
import { FC, useState } from "react";
import { ISelect } from "../../types";
import { SelectItem } from "../select-item/SelectItem";
import classes from "./CustomSelect.module.scss";

interface ICustomSelectProps {
  options: ISelect[];
  value: ISelect | null;
  onChange: (value: ISelect) => void;
  className?: string;
}

export const CustomSelect: FC<ICustomSelectProps> = ({
  options,
  onChange,
  value,
  className,
}) => {
  const [viewAll, setViewAll] = useState<boolean>(false);

  const handlerView = () => setViewAll((state) => !state);

  const handlerSelectItem = (option: ISelect) => () => onChange(option);

  return (
    <div className={cs(classes.select, className)}>
      <h1 className={classes.selectTitle}>Статус</h1>

      <div className={classes.line}></div>

      <AnimatePresence>
        {options.map((option, index) => {
          if (!viewAll && index > 4) return;

          return (
            <SelectItem
              className={classes.item}
              onClick={handlerSelectItem(option)}
              active={value && value.value === option.value}
              key={option.value}
              label={option.label}
            />
          );
        })}
      </AnimatePresence>

      {options.length > 5 && (
        <button className={classes.buttonView} onClick={handlerView}>
          {!viewAll ? "Показать все" : "Скрыть"}
        </button>
      )}
    </div>
  );
};

А вот сам SelectItem

import cs from "classnames";
import { motion } from "framer-motion";
import { FC, MouseEventHandler, useMemo } from "react";
import { MarkIcon } from "@shared/images";
import classes from "./SelectItem.module.scss";

interface ISelectItemProps {
  label: string;
  active: boolean | null;
  onClick?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

const startAnimation = {
  height: 0,
};

const endAnimation = {
  height: "auto",
};

const activeClassSelectTitle = (active: boolean | null) => ({
  [classes.active]: active,
});

export const SelectItem: FC<ISelectItemProps> = ({
  label,
  active,
  onClick,
  className,
}) => (
  <motion.button
    initial={startAnimation}
    animate={endAnimation}
    exit={startAnimation}
    className={cs(classes.selectItem, className)}
    onClick={onClick}
  >
    <p className={cs(classes.selectTitle, activeClassSelectTitle(active))}>
      {label}
    </p>
    {active && <MarkIcon className={classes.markIcon} />}
  </motion.button>
);

Проблема именно CustomSelect, когда я вместо select просто вписываю input, ошибок нет, как можно исправить эту ошибку?

Comments

[szQocks]

попробуй почитать о forwardRef и подумать почему так происходит

вот даже логические подумай как библиотека должна сообщать об ошибках что твой селект не выбран ? как она должна фокус на него сделать ?

[WbICHA]

szQocks, только вот основная проблема тут не в том, что он неиспользует реф, а в том, что он его передаёт.)
К тому же куда тут реф форвардить? У него же просто массив кнопок.

[szQocks]

WbICHA, он из Controller развернул field в свой кастомный селект компонент и там реф передаётся, иначе бы ошибка не вылетела

К тому же куда тут реф форвардить? У него же просто массив кнопок.

наверное в какой-то AnimatePresence - это я так предполагаю что это за место браузерного select а SelectItem - за место option, правда сомневаюсь что это заработает но ошибка пропадёт про ref как минимум

[WbICHA]

szQocks,

он из Controller развернул field в свой кастомный селект компонент и там реф передаётся, иначе бы ошибка не вылетела

Об этом и речь.) Не передавай он реф и ошибки бы не было.

правда сомневаюсь что это заработает

Вот именно, поэтому зачем его вообще передавать?) Там наоборот ещщё ошибки вылезти могут, если передать чему-то левому.

[szQocks]

WbICHA, согласен, теперь я понял о чём ты)

[Дмитрий Путилов]

WbICHA, Сработало, спасибо большое!

[Дмитрий Путилов]

напишите ответ пожалуйста, сделаю его правильным

[szQocks]

Дмитрий Путилов, ну возьми сам и напиши)

что-то типа этого

<Controller
          render={({ field: { onChange, value } }) => (
            <CustomSelect
              className={classes.select}
              options={OptionsCategories}
              onChange={onChange}
              value={value}
            />
          )}
          name="name_2"
          control={control}
        />

[Дмитрий Путилов]

szQocks, я к тому, что бы я ответ мог выбрать правильный. Я уже написал, все работает