ComboBox with Final Form

[Bill]

Has anyone had any luck using a Kendo React Combobox with Final Form? It is not in the third party integration demo for Final Form unfortunately.

[Stefan]

Hello, Bill,

The logic for the CoboBox is the same as the logic for the DropDownList.

I replaced the DropDownList with a ComboBox in the demo:

https://stackblitz.com/edit/github-8a7vyq-be8y71?file=src/FinalForm.js

----------------

Also, as a side note, we have a Form component as well, and there is a large focus on it with many improvements coming in the next weeks. We can suggest taking a look at it as it can prove very helpful:

https://www.telerik.com/kendo-react-ui/components/form/

https://www.telerik.com/blogs/how-to-build-forms-with-react-the-easy-way

Regards,
Stefan
Progress Telerik

[Bill]

Thanks for your reply Stefan. It looks like I'm having Typescript issues (not unusual for me).

Type '(event?: FocusEvent<HTMLElement> | undefined) => void' is not assignable to type '(event: ComboBoxFocusEvent) => void'.

Not sure if you have any suggestions there.

I did see the new Form component, I'll have to check it out, and I'll keep a look out for the improvements.

 

Thanks!

[Stefan]

Hello, Bill,

Thank you for the additional details.

I assume that the issue occurs as we pass all props from the Final Form to our components, as the onFocus event that we expect is a different type:

    return <LabelElement className="k-form-field">
        <span>{label}</span>
        <Type
            {...input} // here there is an onFocus event
            {...rest}
        />

Still, I tested this locally with TypeScript and it seems to work, is it possible to share the TS version used in the application?

Regards,
Stefan
Progress Telerik

[Bill]

Thanks again!

I actually made a custom component so I could wrap it with some other html and I ended up breaking out the onFocus, onBlur from the spread operators and that worked. I also had to pass the data in with a different prop name.

 

I'm appreciative for your help again!