FwFormControl - Dropdown not showing the Choices label

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;

Hi @Gopi ,

For choices, please pass use text and value keys for options . text for label and value the value of the selected option.

options = { value : 1, text:"open", ...}

In future we are introducing optionLabelPath and optionValuePath which will help you with out modifying the options .

We are following the crayons documentation only. Kindly update the documentation.

Hi Gopi, This has been already documented in the docs under formSchema section.

Thanks,
Arvindan

Hi @arvindan.ta,

Thanks!

How can I use the onchange event in this dropdown? I am using the below code, but it is not working.
<FwFormControl
type=“DROPDOWN”
name=“first_name”
required
label=“Name”
placeholder=“Enter First Name”
choices={projectOptions}
fwChange={(e) => {
console.log(“e =====>”, e);
}}
>

Hi Gopi, We don’t provide change event listener on FormControl.

You can either use validate function prop to get the values changed and maybe do some validation.

and doSubmit for submitting the form.

We are working on emitting an event when form fields change. Will post it here once the changes are released.