setFieldValue gives always sets value boolean true from multiple selection Dropdown

Question

if I console.log(data.value) it indeed shows array of chosen options. But when I console.log in validation function in form or submit the form, then the value of that field is always boolean true

initial value is [], but regardless of which multiple options I choose, the output is always boolean true. Diagnoses are strings. StateOptions is array of objects with key, value and text

with the rest of code always all fields(I do not write them here) give value, which was written to them

Looks like setFieldValue function(one of default Formik props) works wrong

this is the code of the field, which always has value true:

import { Dropdown, DropdownProps, Form } from "semantic-ui-react";

<DiagnosisSelection
diagnoses={diagnoses}
name="diagnosisCodes"
setFieldValue={setFieldTouched}
  setFieldTouched={setFieldValue}
disabled={!(entrytype)}

/>

export const DiagnosisSelection = ({
  diagnoses,
  setFieldValue,
  setFieldTouched,
  disabled,
  name
}: {
  diagnoses: DiagnosisEntry[];
  setFieldValue: FormikProps<{ diagnosisCodes: string[] }>["setFieldValue"];
  setFieldTouched: FormikProps<{ diagnosisCodes: string[] }>["setFieldTouched"];
  disabled:boolean;
  name:string;
}) => {
  const field = "diagnosisCodes";
  const onChange = (
    _event: React.SyntheticEvent<HTMLElement, Event>,
    data: DropdownProps
  ) => {
    setFieldTouched(field, true);
    setFieldValue(field, data.value);
  };

  const stateOptions = diagnoses.map(diagnosis => ({
    key: diagnosis.code,
    text: `${diagnosis.name} (${diagnosis.code})`,
    value: diagnosis.code
  }));


if (disabled)
  return null
  return (
    <Form.Field name={name}>
      <label>Diagnoses</label>
      <Dropdown
      name={name}
        fluid
        multiple
        search
        selection
        options={stateOptions}
        onChange={onChange}
      />
      <ErrorMessage name={field} />
    </Form.Field>
  );
};

3cirlces 3cirlces · Accepted Answer · 2020-08-15T20:25:47

It appeared that I wrote wrong: setFieldValue was setFieldTouched and viceversa:

<DiagnosisSelection
  diagnoses={diagnoses}
  name="diagnosisCodes"
  setFieldValue={setFieldValue}
  setFieldTouched={setFieldTouched}
  disabled={!(entrytype)}
/>

setFieldValue gives always sets value boolean true from multiple selection Dropdown

1 Answers