how to use dropdown list component with react hook form (form library)

[Darek Johnson]

Hi,

I have tried many different ways connect dropdown list with react-hook-form implementation but value is not binding.could you please me with this,
Code:

import { DropDownListComponent, DropDownListModel } from "@syncfusion/ej2-react-dropdowns";

import React from "react";

import { useController, Control } from "react-hook-form";

import FormControllerWrapper from "./FormControllerWrapper";

interface CbDropdownListProps {

    control: Control<any>;

    name: string;

    defaultValue?: any;

    dropdownListProps?: DropDownListModel;

    heading?:string;

}

const CbDropdownList: React.FC<CbDropdownListProps> = ({ control, defaultValue, name, dropdownListProps ,heading}) => {

    const {

        field: { ...inputProps },

        fieldState: { invalid, error },

        formState: { isSubmitted }

    } = useController({

        name,

        control,

        defaultValue,

    });

    const selectHandler=(props:any) => {

        console.log(props)

    }

    const changeHandler=(props:any) => {

        console.log(props)

    }

    return (

        <FormControllerWrapper heading={heading}>

     <DropDownListComponent   {...dropdownListProps}  

       {...inputProps}

      change={inputProps.onChange}

     floatLabelType='Never'/>

            {isSubmitted && invalid && error && (<div>{error?.message}</div>)}

    </FormControllerWrapper>

    );

}

export default CbDropdownList;

Form:

import { Row, Col } from "react-bootstrap";

import { ButtonComponent } from "@syncfusion/ej2-react-buttons";

import * as yup from "yup";

import { SubmitHandler } from "react-hook-form";

import getYupSchema from "../../../Helpers/getYupSchema";

import useCbForm from "../../../Hooks/useCbForm";

import { CoachingSession } from "../../../Models/CoachingSessionModel";

import CbDatePicker from "../../UI/FormControllers/CbDatePicker";

import CbCheckbox from "../../UI/FormControllers/CbCheckbox";

import CbDropdownList from "../../UI/FormControllers/CbDropdownList";

import CbRichTextEditor from "../../UI/FormControllers/CbRichTextEditor";

import { COACHING_SESSION_TYPES } from "../../../Constants/GlobalConstants";

import CbTextBox from "../../UI/FormControllers/CbTextBox";

// creating yup Schema

const yupSchema = getYupSchema({

    email:yup.string(),

    date_utc: yup.date(),

    coaching_session_duration: yup.number(),

    cancelled_late: yup.boolean(),

    coaching_session_type: yup.string(),

    coaching_session_notes: yup.string(),

    what_to_work_on_next: yup.string(),

});

const ManageCoachingSessionForm = () => {

    const { control, handleSubmit, formState } = useCbForm({

        date_utc: null,

        coaching_session_duration: 0,

        cancelled_late: false,

        coaching_session_type: '',

        coaching_session_notes: '',

        what_to_work_on_next: ''

    }, yupSchema);

    const onSubmit: SubmitHandler<CoachingSession> = data => {

        console.log(data)

    };

    console.log(formState.isValid)

    return (

        <div className='container mt-5'>

            <form onSubmit={handleSubmit(onSubmit)}>

                <Row>

                    <Col>

                        <CbDatePicker

                            name="date_utc"

                            heading='Session Date'

                            control={control}

                            datePickerProps={{ placeholder: 'Session Date' }}

                        />

                    </Col>

                    <Col>

                        <CbDropdownList

                            name="coaching_session_duration"

                            control={control}

                            heading='Session Duration'

                            dropdownListProps={{

                                placeholder: 'Session Duration',

                                dataSource: [30, 60, 90, 120],

                                showClearButton: true

                            }}

                        />

                    </Col>

                    <Col>

                        <CbCheckbox

                            name="cancelled_late"

                            control={control}

                            heading='Cancelled Late'

                            checkboxProps={{ label: 'Cancelled' }}

                        />

                    </Col>

                </Row>

                <br />

                <Row>

                    <Col>

                        <CbDropdownList

                            name="coaching_session_type"

                            control={control}

                            heading='Coaching Session Type'

                            dropdownListProps={{

                                placeholder: 'Coaching Session Type',

                                dataSource: COACHING_SESSION_TYPES,

                                width: "50%",

                                showClearButton: true

                            }} />

                    </Col>

                    <Col>

                    <CbTextBox

                  name="email"

                  control={control}

                  heading="Email"

                  textBoxProps={{ placeholder: 'Enter your email' }}

                />

                    </Col>

                </Row>

                <br />

                <Row>

                    <Col>

                        <CbRichTextEditor

                            name="coaching_session_notes"

                            control={control}

                            heading='Session Notes'

                            richTextEditorProps={{ placeholder: 'Session Notes...', width: "70%" }}

                        />

                    </Col>

                </Row>

                <br />

                <Row>

                    <Col>

                        <CbRichTextEditor

                            name="what_to_work_on_next"

                            control={control}

                            heading='What to Work on Next'

                            richTextEditorProps={{

                                placeholder: 'What to Work on Next...',

                                width: "70%"

                            }}

                        />

                    </Col>

                </Row>

                <br />

                <div className='d-flex justify-content-end'>

                    <ButtonComponent className="me-4">Cancel</ButtonComponent>

                    <ButtonComponent cssClass='e-primary' type="submit">Save Coaching Session</ButtonComponent>

                </div>

            </form>

        </div>

    )

}

export default ManageCoachingSessionForm;

[Ponmani Murugaiyan]

Hi Darek, 

Thanks for contacting Syncfusion support. 

According to the information you have provided, the value in the Dropdownlist component is not bound. But, you didn't bind any value property to the component. Whether you are reporting that dropdownListProps (placeholder, datasource, showClearButton) are not bound to the component. Can you please elaborate on your reported query and, if possible, share a simple issue replicating sample, so that we can check and provide you with a solution as soon as possible. 

Regards, 

Ponmani M 

[Darek Johnson]

Hi,
i am including a test project with code sandbox which is available in below link
https://codesandbox.io/s/react-hook-form-with-ui-library-ts-forked-9yd17?file=/src/index.tsx:400-433

Here i have used another third party library react-select ,that worked fine which is a example given in react-hook-form libray itself
https://react-hook-form.com/get-started#IntegratingwithUIlibraries

In the same way i have included dropdown list of sync fusion ,the selected value is not able to bind with variable if we submit the above as you will see as alert

i have this road block to implement forms further with sync fusion components, where i can't move forward.

Could you please ,help me asap to get rid of this problem
Let me know still any information needed
Thank for your patience.

[Darek Johnson]

Hi,
could you please  give me solution ASAP to get rid of this problem as it blocks me on project

[Ponmani Murugaiyan]

Hi Darek, 

Sorry for the delay. 

We able to replicate the reported issue in our end. We are currently validating and update further details in 2 business days (May 26, 2021). We appreciate your patience until then. 

Regards, 

Ponmani M 

[Darek Johnson]

Thank you so much for response. I am waiting for your solution.

[Ponmani Murugaiyan]

Hi Darek, 

Sorry for the inconvenience caused. 

We are facing complexity in our end. We need additional time to validate further and update you in 2 business days (May 28, 2021). We appreciate your patience until then. 

Regards, 

Ponmani M 

1

[Darek Johnson]

Hi,

As it is blocking me to move forward, could you please provide me solution ASAP.

Thank you.

[Ponmani Murugaiyan]

Hi Darek, 

We deeply regret for the inconvenience caused. 

Currently we are investigating further with this query. We will provide high priority and update in 1 business days (June 03, 2021). We appreciate your patience until then. 

Regards, 

Ponmani M 

[Ponmani Murugaiyan]

Hi Darek, 

 

Sorry for the delay. 

 

We suggest you to add the name attribute to Dropdownlist component using the htmlAttributes properties, which adds the attributes to the root element. Please find the modified sample to get the selected value from dropdownlist. Kindly check and please get back us if you need further assistance. 

 

API: https://ej2.syncfusion.com/react/documentation/api/drop-down-list#htmlattributes 

 

Sample: https://codesandbox.io/s/react-hook-form-with-ui-library-ts-forked-kn3t1 

 

const htmlAttr = { name: "sports" }; 

 

<Controller 

render={({ field }) => ( 

    <DropDownListComponent {...field} dataSource={sportsData} placeholder="Select a game" htmlAttributes={htmlAttr}/> 

)} 

 

Regards, 

Ponmani M 

[Daimler Clavel]

Hello! We appreciate the discussion since we are facing the same problem here integrating DropdownListComponent & MultiSelectComponent with react-hook-form. We tried your proposed solution but it didn't work. I tested the code you sent on Code Sandbox but seems like the value Golf for the Sport Name is not registered when I tried to submit the form as you can see in the console below.

[Darek Johnson]

Hi,

Still i am not able to bind the value from code sandbox in your example, could you please check again?

[Ponmani Murugaiyan]

Hi Darek, 

Thanks for the update. 

Currently we are checking the reporting query with your provided information. We will update further details in 2 business days (June 09, 2021). We appreciate your patience until then. 

Regards, 

Ponmani M 

[Darek Johnson]

Hi,
Sorry for posting again, I appreciate your work on this problem.
But still I am looking for solution, This is blocking me to move forward, Please provide me at least work around.All other form controls also not working like checkbox,date picker, only textbox is working.

[Ponmani Murugaiyan]

Hi Darek, 

Thanks for the update. 

We have prepared sample working with all form controls like TextBox, Numeric TextBox, Masked TextBox, DatePicker, DateTimePickr and CheckBox. Please find the sample below for reference. 

<form onSubmit={handleSubmit(onSubmit)}> 

<label>Textbox</label> 

<Controller 

  render={({ field }) => <TextBoxComponent {...field} />} 

  name="text" 

  control={control} 

  defaultValue="" 

/> 

<label>Numeric Textbox</label> 

<Controller 

  render={({ field }) => <NumericTextBoxComponent {...field} />} 

  name="numeric" 

  control={control} 

  defaultValue="" 

/> 

<label>Maksed Textbox</label> 

<Controller 

  render={({ field }) => <MaskedTextBoxComponent {...field} />} 

  name="mask" 

  control={control} 

  defaultValue="" 

/> 

<label>DatePicker</label> 

<Controller 

  render={({ field }) => <DatePickerComponent {...field} />} 

  name="date" 

  control={control} 

  defaultValue="" 

/> 

<label>DateTimePicker</label> 

<Controller 

  render={({ field }) => <TimePickerComponent {...field} />} 

  name="time" 

  control={control} 

  defaultValue="" 

/> 

<label>Checkbox</label> 

<Controller 

  render={({ field }) => ( 

    <CheckBoxComponent 

      checked={field.value} 

      change={(e: CheckboxArgs) => field.onChange(e.checked)} 

      {...field} 

    /> 

  )} 

  name="check" 

  control={control} 

/> 

<input type="submit" /> 

</form> 

 

Sample: https://codesandbox.io/s/react-hook-form-with-ui-library-ts-forked-snk8h 

Regards, 

Ponmani M 

[Vishal]

Hi Team,

I'm facing the same issue and not able to get a workaround while as per this thread the final solution provided did not have a dropdownlistcomponent example.

Can you please help out with a  dropdownlistcomponent  sample

[Deepak Ramakrishnan]

Hi Vishal, 

Greetings from Syncfusion support. 

We have validated your requirement in our end . We will update the further details on or before 13^th,August 2021. 

Thanks, 

Deepak R. 

[Deepak Ramakrishnan]

Hi Vishal,  

 

Thanks for your patience . 

 

We can able to reproduce the issue at our end .We need to further validate the issue and update the possibilities on or before 17^th, August 2021. We appreciate your patience until then. 

 

Thanks,  

Deepak R. 

[Sureshkumar P]

Hi Vishal,   

  

Thanks for your patience.  

  

We have considered the issue ‘Selected value does not able to get dropdown list component with react hook form’ as bug in our end. And we will include the fix on upcoming weekly patch release scheduled on August 31^st, 2021. You can track the status using the below feedback link.   

 

 

 Feedback link : https://www.syncfusion.com/feedback/28002   

 

We appreciate your patience until then.   

  

Thanks,   

Sureshkumar P 

[Deepak Ramakrishnan]

Hi Vishal, 

 

Thanks for your patience. 

 

We are glad to announce that our weekly release v19.2.0.57 is rolled out, which include the fix for the reported issue ‘Selected value does not able to get dropdown list component with react hook form (form library)’ . So kindly upgrade to mentioned version or the latest to avail the fix. 

Release notes : https://ej2.syncfusion.com/react/documentation/release-notes/19.2.57/?type=all#dropdownlist 

Feedback link : https://www.syncfusion.com/feedback/28002  

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

 

Thanks, 

Deepak R.