Urgent -----Select Dropdown value not getting submitted in Forge Custom UI

Forge Forge Custom UI and UI kit (beta)
1

Please I need this solution urgent. Am working with forge custom ui. I need to select dropdown list value and submit via form from Forge custom ui. but the selected value is always empty or undefined. below is the code.

alert(color); is always empty or undefined each time selected color value is submitted


const onSubmitColor  = (formData) => {

const color = formData.color;
alert(color);

// Process form Data
//setFormState1(formData);
	};

Form Code


 <Form onSubmit={onSubmitColor}>
      {({ formProps }: any) => (
        <form {...formProps}>

<Select
      name="color"
      id="color"
      inputId="single-select-example"
      className="single-select"
      classNamePrefix="react-select"
      options={[
        { label: 'Red', value: 'Red' },
        { label: 'Blue', value: 'Blue' },
        { label: 'green', value: 'Green' },
      ]}
      placeholder="Choose a Color"
    />
		  
          <FormFooter>
            <Button type="submit" appearance="primary">
              Submit
            </Button>
          </FormFooter>
        </form>
      )}
    </Form>

Please can someone help me out or better provide me with a sample solution that works.

1 Like
2

You’re missing an onChange on your select. The easiest way to handle that is to use the <Field> wrapper component

<Field name="color">
   {({ fieldProps: { id, ...rest }, error }) => (
     <Select
      name="color"
      id="color"
      inputId="single-select-example"
      className="single-select"
      classNamePrefix="react-select"
      options={[
        { label: 'Red', value: 'Red' },
        { label: 'Blue', value: 'Blue' },
        { label: 'green', value: 'Green' },
      ]}
      placeholder="Choose a Color"
      {...rest}
    />
)}
</Field>
3

Thanks for getting back to me. Please where do you add the onchange on the select

4

If you wrap it in a <Field> you get it for free when you add {...rest} as in my example, otherwise you can explicitly add onChange as a prop for the Select component.

5

Thanks