Text field implementing custom component does not have access to formContext.

[richardvanbergen]

Bug Report

I've had a little colour picker component that I've been using for a while and with the update to 0.5.2 it's now causing my admin panel to crash.

I've had a little look into it and it seems to be that getField is comes back with no value as FormContext is not initialised.

payload/src/admin/components/forms/useFieldType/index.tsx

Line 35 in a413859

const field = getField(path);

Steps to Reproduce

1. Update to payload 0.5.2
2. Create a text field and set admin.components.Field to the code below.
3. View your new field in admin.
4. Crashes.

Additional Context

Stack trace log: debug-1.log

import React from 'react'
import { useFieldType } from 'payload/components/forms';
import { BlockPicker, ColorResult } from 'react-color';

export interface ColorPickerTextField {
  path: string;
  label: string;
  admin?: {
    width?: string;
  }
}

const ColorPickerTextField: React.FC<ColorPickerTextField> = (props) => {
  const {
    path,
    label,
    admin: {
      width
    } = {}
  } = props

  const { value, setValue } = useFieldType({ path });

  const handleColorPicker = (color: ColorResult): void => {
    setValue(color.hex)
  }

  const style = width
    ? {
      style: {
        width
      }
    }
    : null


  return (
    <div {...style}>
      {label
        ? <label className="field-label">{label}</label>
        : null
      }

      <BlockPicker
        triangle="hide"
        colors={[
          `#212121`,
          `#313131`,
          `#F3F0E1`,
          `#FF423B`,
          `#007569`,
          `#FFB997`,
          `#ffffff`,
          `#000000`,
        ]}
        onChangeComplete={handleColorPicker} color={value} />
    </div>
  )
}

export default ColorPickerTextField

[jmikrut]

Hey @richardvanbergen — I just wired up this same code in a separate app on 0.5.2 and was not table to recreate the issue. Strange...

Maybe reinstall Payload at 0.5.2? I hate recommending that without having more certainty around what caused this specifically. Does this happen with all collections that have your custom field? Can you create a mini collection with this custom field and see if it still happens?

[richardvanbergen]

Hey! Sorry looks like you were right. I deleted my yarn.lock and all node_modules in my workspace, reinstalled, and now it works just fine!

[jmikrut]

You have no idea how happy that makes me to hear. I was prepared to move Earth. No idea what would have caused that!