ComboBox with Final Form

5 posts, 0 answers
  1. Bill
    Bill avatar
    15 posts
    Member since:
    Jun 2019

    Posted 03 Apr 2020 Link to this post

    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.
  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 06 Apr 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Bill
    Bill avatar
    15 posts
    Member since:
    Jun 2019

    Posted 06 Apr 2020 in reply to Stefan Link to this post

    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!

  4. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 07 Apr 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Bill
    Bill avatar
    15 posts
    Member since:
    Jun 2019

    Posted 07 Apr 2020 in reply to Stefan Link to this post

    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!

Back to Top