ref error with Select component

[HartiganHM]

Hey, all!

Quick question when using react-hook-form with Paste. This might have been answered already, but I'm getting an error regarding refs. Functionality works, nothing is breaking, but the error is showing up in the console and making me itch 😅

---

Error

  console.error
    Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
        at Select (/Users/hhartigan/Projects/support/help-center-ui/src/components/blocks/compositSelect/CompositeSelect.tsx:19:3)
        at Object.<anonymous>.exports.Controller (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-hook-form/src/useFormContext.tsx:21:6)
        at form
        at Styled(div)
        at SupportRequestForm (/Users/hhartigan/Projects/support/help-center-ui/src/containers/SupportRequestForm/SupportRequestForm.tsx:39:38)

---

Where component is used

      <Controller
        name="productCategory"
        control={control}
        defaultValue={productCategoryFields[0]?.value}
        rules={{
          required: true,
        }}
        render={({ field }) => (
          <CompositeSelect
            hasError={!!errors.productCategory}
            id={PRODUCT_SELECT_ID}
            label={copy.cagtegoryLabel}
            marginBottom="space90"
            required
            width="20rem"
            {...field}
          >
            {productCategoryFields.map(({ name, value }) => (
              <Option key={value} value={value}>
                {name}
              </Option>
            ))}
          </CompositeSelect>
        )}
      />

---

Component (Composite Select)

interface CompositeSelectProps extends PasteSelectProps {
  label: string;
  marginBottom?: Margin;
  required?: boolean;
  width?: Width;
}
const CompositeSelect = ({
  children,
  id,
  label,
  marginBottom,
  onChange,
  required,
  value,
  width,
  ...rest
}: SelectProps): ReactElement => {
  return (
    <Box marginBottom={marginBottom} width={width}>
      <Label htmlFor={id} required={required}>
        {label}
      </Label>
      <PasteSelect id={id} onChange={onChange} value={value} {...rest}>
        {children}
      </PasteSelect>
    </Box>
  );
};
CompositeSelect.defaultProps = {
  required: false,
  marginBottom: 'space0',
  width: undefined,
};

[SiTaggart]

Thanks @HartiganHM

For prosperity and pulling out of Slack if someone comes across this again, what you need to do when wrapping one of the Paste components and you need to rely on refs, is forward the ref on your wrapper component and pass it down to the Paste component.

If you don't, the ref to the Paste component is not exposed to consumers of your wrapper component, in this case the CompositeSelect component. That's why React-hook-form can't find the ref.

const CompositeSelect = forwardRef(
  (
    {
      children,
      id,
      label,
      marginBottom,
      onChange,
      required,
      value,
      width,
      ...rest
    }: CompositeSelectProps,
    ref: Ref<HTMLSelectElement>,
  ): ReactElement => {
    return (
      <Box marginBottom={marginBottom} width={width}>
        <Label htmlFor={id} required={required}>
          {label}
        </Label>
        <Select id={id} onChange={onChange} value={value} ref={ref} {...rest}>
          {children}
        </Select>
      </Box>
    );
  },
);