Some inputs won't open inside arrays

[chrisvxd]

From this discord thread, the native HTML5 color picker won't open inside an array field.

Steps to reproduce

1. Create a custom field using an HTML 5 color picker
2. Place the field inside an array field
3. Attempt to click the color picker

What happens

The color picker didn't open

What I expected to happen

The color picker is shown

Code example

import { ComponentConfig, DropZone, FieldLabel } from "@measured/puck";

export type FlexBlockProps = {
  items: { minItemWidth?: number, itemColor: string }[];
  minItemWidth: number;
}

export const FlexBlock: ComponentConfig<FlexBlockProps> = {
  fields: {
    items: {
      type: "array",
      label: "Items",
      arrayFields: {
        minItemWidth: {
          label: "Minimum Item Width",
          type: "number",
          min: 0,
        },
        itemColor: {
          type: "custom",
          label: "Color",
          render: ({ name, onChange, value, field }) => (
            <FieldLabel label={field.label!}>
              <input
                type="color"
                defaultValue={value}
                name={name}
                onChange={(e) => onChange(e.currentTarget.value)}
              />
            </FieldLabel>
          )
        }
      },
      getItemSummary: (arrayFields, id = -1) => `Item ${id + 1}`,
    },
    minItemWidth: {
      label: "Minimum Item Width",
      type: "number",
      min: 0,
    },
  },
  defaultProps: {
    items: [{ itemColor: '#ff0000' }, { itemColor: '#ff0000' }],
    minItemWidth: 356,
  },
  render: ({ items, minItemWidth }) => {
    return (
      <div className="flex-container">
        {items.map((item, idx) => (
          <div
            key={idx}
            className="flex-item"
            style={{ minWidth: item.minItemWidth || minItemWidth, color: item.itemColor }}
          >
            <DropZone zone={`item-${idx}`} />
          </div>
        ))}
      </div>
    );
  },
};