1.6.0 Custom input with typescript break build

[Xeyos88]

Hi,
I have some custom inputs in my configuration e.g:

const listSeparator = createInput(ListSeparatorFormKit)
....
const config: DefaultConfigOptions = {
  plugins: [changeLabelPlugin()],
  config: {
    classes: generateClasses({
     .....
    }),
  },
  inputs: {
    listSeparator,
  },
}

And use it in this way:

 <FormKit
       type="listSeparator"
       name="paths"
       label="Input paths"
      placeholder="Set input paths"
      validation="required"
     />

I use typescript and until the version 1.5.9 I didn't have any problems.

With the versione 1.6.0 I have this error:

error TS2322: Type '"listSeparator"' is not assignable to type '"number" | "range" | "month" | "time" | "search" | "list" | "button" | "form" | "meta" | "select" | "textarea" | "text" | "hidden" | "color" | "checkbox" | "date" | "email" | "file" | ... 8 more ... | undefined'.

321 type="listSeparator"

I looked at the documentation but there is nothing different

[dominikklein]

Did you already check the changelog?

https://formkit.com/changelog

There is this note:

Custom Input Types

The type argument of the FormKit component now requires a matching type in the FormKitInputProps type for TypeScript support. If you are using custom inputs and have supplied a module augmentation for FormKitInputProps, you will need to [update the FormKitInputProps type to include your types](https://formkit.com/essentials/custom-inputs).

https://formkit.com/essentials/custom-inputs

[Xeyos88]

Ok in quick check I missed the part about the extension of FormKitInputProps.
I will try thx

[Xeyos88]

The solution works but with a doubt:
I have 4 custom types and have currently increased the definition for only one of them, but the build goes through and everything works.
I don't understand why it is not necessary to define all 4 types.
I also tried to put as a key a value that is not among the 4 types I defined and it still works.

[Finrod927]

Hi
I also had the same issue and also missed the info in the changelog on the site (I checked the changelog in the repo, nothing there about that).
I also have some doubt about that augmentation, once I created a d.ts file with declare module '@formkit/inputs' the error was gone, and no matter what I put in the module, the error does not show up.

But it breaks the autocompletion, even with correct keys in the FormKitInputProps, the autompletion of the FormKit component is broken: props are not correctly suggested, and the type props does not suggest the FormKit input types.

@Xeyos88, did you figure it out?

[justin-schroeder]

Can you provide a minimal reproduction of this in a new repository?

[Finrod927]

I just fixed it,
I'm not sure it's the correct way to do it (I'm not very familiar with module augmentation), but declaring the module augmentation in a .ts file instead of a .d.ts file seems to work.

The error is now shown on custom types I did not declared, and the auto-completion is working and suggesting custom types I declared in the module.