"AddAsterixPlugin" breaks the Dropdown & Autocomplete Fields

[coatesjonathan]

Reproduction

https://formkit.link/fe81ddad8bd519d1af3451237f1653cc

Describe the bug

When using the official "AddAsterixPlugin" provided on the Formkit docs, it breaks certain Pro fields, such as the Dropdown and Autocomplete field's layout, and the options do not appear.

Environment

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

[gbyesiltas]

I have a different version of this plugin (probably from before so may be missing some fixes/features that were added later) but it does work with dropdowns and autocompletes:

import {
  type FormKitExtendableSchemaRoot,
  type FormKitNode,
} from "@formkit/core";

// https://formkit.com/essentials/examples
const isCheckboxAndRadioMultiple = (node: FormKitNode) =>
  (node.props.type === "checkbox" || node.props.type === "radio") &&
  node.props.options;



export default function addAsteriskPlugin(node: FormKitNode) {
  node.on("created", () => {
    if (!node.props.definition || !node.context || node.type !== "input") {
      return;
    }

    const inputTypeUniqueKey = node.props.definition.schemaMemoKey || node.context.type;
    node.props.definition.schemaMemoKey = `required_${isCheckboxAndRadioMultiple(node) ? 'multi_' : ""}${inputTypeUniqueKey}`
    node.context.isRequired = node.props.parsedRules.some(
      (rule: { name: string }) => rule.name === "required",
    );

    node.on('prop:validation', () => {
      if (!node.context) return;
      node.context.isRequired = node.props.parsedRules.some((rule: { name: string }) => rule.name === 'required')
    })

    // it would be better to have a proper type check here, but this plugin comes straight
    // from the FormKit site, so we'll just assert this and assume they know what they're doing
    const schemaFn = node.props.definition
      .schema as FormKitExtendableSchemaRoot;

    node.props.definition.schema = (sectionsSchema = {}) => {
      sectionsSchema[isCheckboxAndRadioMultiple(node) ? 'legend' : 'label'] = {
        children: ['$label', {
          $el: 'span',
          if: '$isRequired',
          attrs: {
            class: '$classes.asterisk',
          },
          children: ['*']
        }]
      }

      return schemaFn(sectionsSchema)
    }
  })
}

[fenilli]

Ok so looking into it, seens like a problem with autocomplete and repeater autocomplete and dropdown: https://formkit.link/53b72e2a6eb3725163af184064d20923

And it has something to do with the schemaMemoKey node.props.definition.schemaMemoKey = `required_${node.props.definition.schemaMemoKey}`

[fenilli]

As a workaround ( not sure what the full implications it is yet ) you can remove the line:

node.props.definition.schemaMemoKey = `required_${node.props.definition.schemaMemoKey}`  

[coatesjonathan]

As a workaround ( not sure what the full implications it is yet ) you can remove the line:

node.props.definition.schemaMemoKey = `required_${node.props.definition.schemaMemoKey}`  

Yeah this works as a fix, but does this have a knock on effect?

[fenilli]

tbf I'm not sure how schemaMemoKey works this smart guy might know more -> @justin-schroeder

[justin-schroeder]

Thanks for the heads up!

In version 1.4 we introduced the context.state.required which indicates whether or not an input is actually required or not. This makes all this much easier.

https://formkit.link/39ef1ce063059b72671fc5f15d1295c6

Docs have been updated with this version too 👍

[coatesjonathan]

Awesome thanks @justin-schroeder this fixes it perfectly! :)