Hi Team,
I am using Fwformcontrol - a dropdown-type component in my react app.
The dropdown is showing with values also, but the value label is not showing. Please refer to the attached screenshot.
Package: “@freshworks/crayons”: “^4.0.4”
The code I am using is:
import React, { useRef } from “react”;
import { FwForm, FwFormControl, FwButton } from “@freshworks/crayons/react”;
const FwSelectForm = () => {
const options = [
{
value: 1,
label: “open”,
position: 1,
dependent_ids: {},
},
{
value: 2,
label: “pending”,
position: 2,
dependent_ids: {},
},
{
value: 3,
label: “closed”,
position: 3,
dependent_ids: {},
},
];
const formRef = useRef();
const handleFormSubmit = async (e) => {
const { values, isValid, errors } = await formRef.current.doSubmit(e);
console.log({ result: values, errors });
// make ajax post end point with values
// fetch(“/post”,values);
// if error from backend , set Errors - passing key value pair
if (!isValid) {
// set Errors on the form
formRef.current.setFieldErrors({
first_name: "First Name must be unique <<Server Error>>",
});
// reset the form if required if success
// formRef.current.doReset(e);
}
};
const handleFormReset = (e) => {
formRef.current.doReset(e);
};
return (
<FwForm
ref={formRef}
validate={async (values) => {
// do custom validation and return error or {}
console.log(“values in form ----->”, values);
}}
>
<FwFormControl
type=“DROPDOWN”
name=“first_name”
required
label=“Dropdown”
placeholder=“Select Choices”
fieldProps={{ maxlength: 5 }}
choices={options}
>
<FwButton
style={{ float: "right", marginLeft: "10px" }}
onClick={handleFormSubmit}
>
Create & Link Issue
</FwButton>
<FwButton
style={{ float: "right" }}
color="secondary"
onClick={handleFormReset}
>
Cancel
</FwButton>
</FwForm>
</div>
);
};
export default FwSelectForm;
