Regression in base@2.13.1 with list options in object previews

Describe the bug

Starting in @sanity/base@2.13.1, list options (on a type: string) are not implemented in a preview when using the prepare() function. The bug does not occur if the prepare() function is omitted. It occurs on both object and document previews.

To Reproduce

Steps to reproduce the behavior:

1. Create a string field that is configured with options.list values:

{
  title: "Size",
  name: "size",
  type: "string",
  options: {
    list: [
      { title: "Small", value: "small" },
      { title: "Medium", value: "medium" },
      { title: "Large", value: "large" },
      { title: "X-Large", value: "xlarge" },
      { title: "Full", value: "full" },
    ],
  },
},

1. Create a preview that includes a prepare function:

preview: {
  select: {
    size: "size",
  },
  prepare(selection) {
    const { size } = selection;
    return {
      title: size ? `Size: ${size}` : null;
    };
  },
},

1. Run sanity start and create a document/object.
2. Preview will return a blank title. In base@2.13.0, the title is returned correctly. Commenting out options in the schema will also correctly return the values in the preview.

Expected behavior

It’s expected that the title will be returned correctly (i.e., displaying Size: <size>) in the preview.

Which versions of Sanity are you using?

base@2.13.1

What operating system are you using?

macOS 11.3

Which versions of Node.js / npm are you running?

7.18.1 v16.4.1

Additional context

The regression appears related to the code that was added here, as commenting out the resulting code in node_modules/@sanity/base/lib/preview/prepareForPreview.js causes the preview to work as expected. That code is:

    // Find the field the value belongs to
    var valueField = type === null || type === void 0 ? void 0 : (_type$fields = type.fields) === null || _type$fields === void 0 ? void 0 : _type$fields.find(f => f.name === selection[key]); // Check if predefined options exist

    var listOptions = valueField === null || valueField === void 0 ? void 0 : (_valueField$type = valueField.type) === null || _valueField$type === void 0 ? void 0 : (_valueField$type$opti = _valueField$type.options) === null || _valueField$type$opti === void 0 ? void 0 : _valueField$type$opti.list;

    if (listOptions) {
      // Find the selected option that matches the raw value
      var selectedOption = listOptions.find(opt => opt.value === rawValue[selection[key]]);
      acc[key] = (0, _get2.default)(selectedOption, key);
      return acc;
    }

[vicmeow]

I noticed this too, looking into it!

[KittyGiraudel]

I was just about to open an issue about this—I’m glad to see I’m not the only one who stumbled into this. If that helps, a workaround is to add to every option from the field you’re previewing a key matching the one you query in select.

Considering @geoffreyjball’s original example, where size is used as a key in the select object:

{
  title: "Size",
  name: "size",
  type: "string",
  options: {
    list: [
      { title: "Small", value: "small", size: "small" },
      { title: "Medium", value: "medium", size: "medium" },
      { title: "Large", value: "large", size: "large" },
      { title: "X-Large", value: "xlarge", size: "xlarge" },
      { title: "Full", value: "full", size: "full" },
    ],
  },
},

This works because the regression causes the preview to read the given key (here size) on the selected option. Not ideal, but also very actionable until there is a fix.

Side note: besides this issue, I think the faulty code is also not considering a list of options authored as an array, which is possible as per the docs.

Possible fix: if the selected option was found, return its title (or just the value if the options are authored as an array)? Another way would be to allow a preview key on every option which would be use for that case?