onClick not handling all values

Reproduction

https://formkit.link/bafcc2084a9cad6394827c2c9e68deb5

Describe the bug

I feel like I have to be doing something stupid here. I’ve been working off the multi-step form example here and sandboxing some new features I need as a proof of concept. The playground example shows a case where an onClick handler doesn’t seem to handle being passed an object. Open that example, open the dev console, and click the LogObj button. The definition for that button is:

    {
      $formkit: 'button',
      onClick: '$log({"nextStep":"bla", "test":2})',
      children: 'LogObj'
    },

The log function is defined in Playground.vue as:

  log: target => () => {
    console.log('target:', target)
  },

In the console I just see: target: {"nextStep":"bla".

At one point onClick was also handling URLs weird for me but now I can’t reproduce that in the playground. Is it possible formkit’s parsing of variables in schema values is having trouble with certain values/types being used there? Am I just wrong in assuming it can evaluate a JS object? Maybe I need to be passing a JSON string and decoding it if I want to get away with something like the above?

Environment

• OS: MacOS • Browser: Chrome • Version: 101.0.4951.64 (Official Build) (x86_64)

[totalhack]

Hey @totalhack — separate from any schema modification if you’re just trying to access literal strings such as a hardcoded URL perhaps you could use a group and name it something like “meta” and fill it with type hidden fields that contain those values you could access such as meta.redirectUrl?

Hey @andrew-boyd, just wanted to note that I took a different approach to this. Instead I just added a “fake” node to the schema that simply holds metadata, and in a wrapper to FormKitSchema I look for that and update a meta field in the data value. For example:

const schema = [
  {
    type: 'meta',
    data: {
      someTestField: "Hey you can access this elsewhere as $meta.someTestField"
    }
  },

It doesn’t seem that formkit minds that I put an invalid node in the schema, it just ignores it. This is a lot cleaner than adding groups and hidden inputs IMO.

[luan-nk-nguyen]

@totalhack you can also put the ignore: true prop on any input and it won’t be included in the posted form data.