Error: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

[vitormarkis]

I'm receiving this error: Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? when i'm not even trying to use a ref.

The app works fine, but i wanna handle this error.

Here is the repo: https://github.com/vitormarkis/asseties

The steps to invoke the error:

I click a <Tag /> (purple element), then 'Editar' <PopoverButton />, and the <EditTag /> opens.

Inside Tag element >

<PopoverButton
    type="button"
    action="Editar"
    element={
      <EditTag
        actionAttrs={actionAttributes.edit}
        tag={tag}
        setIsPopoverOpen={setIsPopoverOpen}
        asset={asset}
        setState={setState}
      />
    }
  />

Inside PopoverButton >

import * as Dialog from "@radix-ui/react-dialog"
import React, { HTMLAttributes } from "react"

interface Props extends HTMLAttributes<HTMLDivElement> {
  action: React.ReactNode | string
  event?: () => void
  element?: React.ReactNode
  type?: "button" | "submit" | "reset"
}
const PopoverButton: React.FC<Props> = ({ action, event, element, type = "button" }) => {
  return (
    <Dialog.Root>
      <Dialog.Trigger
        type={type}
        onClick={event}
        className="text-sm px-2 py-1 text-slate-200 border-t-slate-700 border-t text-left flex items-center last-of-type:border-b border-b-slate-700 hover:bg-slate-700"
      >
        <div>{action}</div>
      </Dialog.Trigger>
      {element ? <Dialog.Portal>{element}</Dialog.Portal> : null}
    </Dialog.Root>
  )
}

export default PopoverButton

And the element i'm rendering is this EditTag component

function EditTag({ actionAttrs, tag, asset, setState, setIsPopoverOpen }: Props) {
  const { register, handleSubmit } = useForm<TagEditFields>()

  const onSubmit: SubmitHandler<TagEditFields> = tagFormFields => {
    // submit logic
  }

  return (
    <>
      <Dialog.Overlay className="inset-0 fixed bg-black/20" />

      <Dialog.Content
        onCloseAutoFocus={() => setIsPopoverOpen(false)}
        className="
          fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
          text-sm p-4 rounded-lg bg-zinc-100 flex flex-col z-20
          "
      >
        <Dialog.Title className="text-lg text-zinc-600 tracking-wide leading-4 mb-1">{actionAttrs.title}</Dialog.Title>
        <Dialog.Description className="text-zinc-400 text-xs">{actionAttrs.description}</Dialog.Description>
        <form
          onSubmit={handleSubmit(onSubmit)}
          className="flex flex-col gap-2 my-2"
        >
          <Input
            register={register}
            field="tag_name"
            defaultValue={tag.tag_name}
            placeholder="react native"
          />

          <Select
            register={register}
            field="category"
            defaultValue={tag.category}
            options={categories}
          />

          <div className="flex items-center justify-between">
            <Button
              onClick={() => setIsPopoverOpen(false)}
              bg="red"
              color="white"
              rounded="md"
              value="Fechar"
              fontSize="extra-small"
            />
            <Button
              type="submit"
              bg="green"
              color="white"
              rounded="md"
              value="Salvar"
              fontSize="extra-small"
              autoFocus={true}
            />
          </div>
        </form>
      </Dialog.Content>
    </>
  )
}

export default EditTag

This error occur once in the app lifetime, F5

I found this error is occurring in the line {element ? <Dialog.Portal>{element}</Dialog.Portal> : null} inside <PopoverButton /> component

[joaom00]

The Tag component is a dropdown? If so can you show?

[vitormarkis]

It's just clickable div that opens this options popover, with "editar" and "remover"

here is the <Tag /> code:

const Tag: React.FC<Props> = props => {
  const { bg, color, tag, asset, container, popover, setState, ...rest } = props
  const [isPopoverOpen, setIsPopoverOpen] = useState(false)

  const actionAttributes = {
    edit: {
      title: "Editar a tag",
      description: "Insira as novas informações da tag...",
    },
  }

  function handleDeleteTag(tag: TagType) {
    const assetsWithoutRemovedOne = AssetOR(asset).removeTag(tag.id)
    const refreshedAsset = AssetOR(assetsWithoutRemovedOne).refresh()

    if (queryClient.getQueryData("assets")) {
      CacheReducers(queryClient, "assets").asset().update(refreshedAsset)
    } else {
      throw new Error("Não existe cache para assets!")
    }

    if (setState) setState(refreshedAsset)
    axios.put(baseURL + "/" + refreshedAsset.id, refreshedAsset)
  }

  function handleClickDownOutside() {}

  return (
    <Popover.Root
      open={isPopoverOpen}
      onOpenChange={setIsPopoverOpen}
    >
      <Popover.Trigger>
        <div
          className="leading-none p-1 rounded-sm text-xs flex gap-2 items-center"
          style={{
            backgroundColor: bg ?? "#52525B",
            color: color ?? "#fff",
          }}
          {...rest}
        >
          <p>{tag.tag_name}</p>
          <p
            onClick={() => handleDeleteTag(tag)}
            className="cursor-pointer p-1 rounded-full bg-black/20 mr-1 w-2.5 h-2.5"
          />
        </div>
      </Popover.Trigger>
      {popover && (
        <Popover.Portal>
          <Popover.Content
            onPointerDownOutside={handleClickDownOutside}
            side="right"
            align="center"
            sticky="always"
            collisionBoundary={container}
            collisionPadding={{ left: 16 }}
            hideWhenDetached={true}
            className="plate py-2 rounded-md bg-slate-800 shadow-md shadow-black/20 flex flex-col text-xs"
          >
            <PopoverButton
              type="button"
              action="Excluir"
              event={() => handleDeleteTag(tag)}
            />
            <PopoverButton
              type="button"
              action="Editar"
              element={
                <EditTag
                  actionAttrs={actionAttributes.edit}
                  tag={tag}
                  setIsPopoverOpen={setIsPopoverOpen}
                  asset={asset}
                  setState={setState}
                />
              }
            />
            <Popover.Arrow
              fill="#1E293B"
              width={4}
              height={4}
            />
            {/* <Popover.Close>XIS</Popover.Close> */}
          </Popover.Content>
        </Popover.Portal>
      )}
    </Popover.Root>
  )
}

[joaom00]

Using forwardRef in EditTag and the error will go away. It's because Dialog.Portal uses Portal primitive with asChild in each child and this makes the children need to use forwardRef.

Another solution, just move Dialog.Portal into the EditTag