hubgit/SelectField.tsx

SuryaWebfox · 2020-07-07T04:13:44Z

Here is my solution:

SelectField.js

import React from 'react';
import Select from 'react-select';
import {useField} from 'formik';

function SelectField(props) {
  const [field, state, {setValue, setTouched}] = useField(props.field.name);

  const onChange = ({value}) => {
    setValue(value);
  };

  return (
    <Select {...props} onChange={onChange} onBlur={setTouched}/>
  );
}

export default SelectField;

And in your Formik form simply use

<Field component={SelectField} name="fieldname" options={options}/>

where options has the format of

const options = [
   {value: 1, label: 'text'},
   ...
]

Edit: very similar to @kablamus solution

ayush-shta · 2020-07-21T08:24:30Z

thank you: @deanc and @elie222

torian257x · 2020-08-15T23:42:24Z

@SuryaVanLierde setting

<Formik initialValues={

doesnt seem to work with your solution

justadhoc · 2020-08-18T23:23:04Z

Here is my approach:

import React from 'react';
import { Formik } from 'formik';
import Select from 'react-select';

const MySelect = props => {
    const options = [
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' },
      ];


    return (
        <Formik
            initialValues={{
                flavors: ""
            }}
            onSubmit={values => alert(JSON.stringify(values, null, 2))}
            >
            {
                props => {
                    const {
                        values,
                        handleSubmit,
                        handleBlur,
                        setFieldValue
                    } = props;
                    return (
                        <form onSubmit={handleSubmit}>
                            <div style={{width: "200px", marginBottom: "15px"}}>
                                <Select
                                    id={"flavors"}
                                    type={"text"}
                                    value={values.flavors}
                                    onChange={option => setFieldValue("flavors", option)}
                                    options={options}
                                    onBlur={handleBlur}
                                />
                            </div>
                            <button>Submit</button>
                        </form>
                    );
                }
            }
        </Formik>
    );
}

export default MySelect;

mihailsitnic · 2020-09-14T12:26:05Z

Here is my approach:

import React from 'react';
import { Formik } from 'formik';
import Select from 'react-select';

const MySelect = props => {
    const options = [
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' },
      ];


    return (
        <Formik
            initialValues={{
                flavors: ""
            }}
            onSubmit={values => alert(JSON.stringify(values, null, 2))}
            >
            {
                props => {
                    const {
                        values,
                        handleSubmit,
                        handleBlur,
                        setFieldValue
                    } = props;
                    return (
                        <form onSubmit={handleSubmit}>
                            <div style={{width: "200px", marginBottom: "15px"}}>
                                <Select
                                    id={"flavors"}
                                    type={"text"}
                                    value={values.flavors}
                                    onChange={option => setFieldValue("flavors", option)}
                                    options={options}
                                    onBlur={handleBlur}
                                />
                            </div>
                            <button>Submit</button>
                        </form>
                    );
                }
            }
        </Formik>
    );
}

export default MySelect;

👍

quinceleaf · 2020-09-19T04:53:08Z

I solved it by checking if there are any options available

const onChange = (option: ValueType<Option | Option[]>) => {
   setFieldValue(
      field.name,
      option ? (option as Option[]).map((item: Option) => item.value) : []
   );
});

This solution solved the multi-case for me (with react-select 3.1.0 and formik 2.1.5), but then would trigger TypeError: option.map is not a function for the single-case.

In trying to keep with the intent of @yassinedoghri's original code, aiming for a solution for both the single- and multi-case, the following change worked for me (I removed the Typescript annotations, but they should be easy to restore - I didn't do so as I am testing it in a non-TS application):

const onChange = (option) => {
    form.setFieldValue(
      field.name,
        !isMulti ? option.value
        : isMulti && option !== null ? option.map((item) => item.value)
        : []
    );
  };

dqtkien · 2020-10-13T09:11:31Z

Here is my approach:

import React from 'react';
import { Formik } from 'formik';
import Select from 'react-select';

const MySelect = props => {
    const options = [
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' },
      ];


    return (
        <Formik
            initialValues={{
                flavors: ""
            }}
            onSubmit={values => alert(JSON.stringify(values, null, 2))}
            >
            {
                props => {
                    const {
                        values,
                        handleSubmit,
                        handleBlur,
                        setFieldValue
                    } = props;
                    return (
                        <form onSubmit={handleSubmit}>
                            <div style={{width: "200px", marginBottom: "15px"}}>
                                <Select
                                    id={"flavors"}
                                    type={"text"}
                                    value={values.flavors}
                                    onChange={option => setFieldValue("flavors", option)}
                                    options={options}
                                    onBlur={handleBlur}
                                />
                            </div>
                            <button>Submit</button>
                        </form>
                    );
                }
            }
        </Formik>
    );
}

export default MySelect;

Hi, when I change from " value={values.flavors} ---> to value={name} " (name = `${values.flavors}` ), it doesn't work at all. The state is update correctly but it doesn't render value on react-select . Please let me know how to fix this. Because I want to make this Select as a component so I can re-use somewhere by passing the name of this input.

Dollique · 2020-12-30T11:39:02Z

I had some trouble getting this to work, as I wanted to also be able to call a custom function onChange.
As I don't use isMulti I didn't fix the issues with it!

This is my working solution so far:

import { FieldProps } from 'formik';
import React from 'react';
import Select, { OptionsType, ValueType } from 'react-select';

interface Option {
    label: string;
    value: string;
}

type IsMulti = boolean;

interface CustomSelectProps extends FieldProps {
    options: OptionsType<Option>;
    isMulti?: boolean;
    customOnChange?: Function;
}

export const SelectField = ({
    field,
    form,
    options,
    isMulti = false,
    customOnChange,
}: CustomSelectProps): JSX.Element => {
    const customOnChangeFn = (customFunction: Function, option: ValueType<Option | Option[], IsMulti>): void => {
        customFunction(option); // call a custom function and pass the selected option as a parameter
    };

    const onChange = (option: ValueType<Option | Option[], IsMulti>): void => {
        form.setFieldValue(
            field.name,
            isMulti ? (option as Option[]).map((item: Option) => item.value) : (option as Option).value
        );

        if (customOnChange !== undefined) {
            customOnChangeFn(customOnChange, option);
        }
    };

    const getValue = (): ValueType<Option, boolean> => {
        if (options) {
            return isMulti
                ? options.filter((option) => field.value.indexOf(option.value) >= 0)
                : options.find((option) => option.value === field.value);
        } else {
            return isMulti ? [] : ('' as any);
        }
    };

    return <Select name={field.name} value={getValue()} onChange={onChange} options={options} isMulti={isMulti} />;
};

export default SelectField;

lucasrisatto · 2021-02-04T19:12:48Z

Hello!
This is my multi select component:

import { FieldProps } from 'formik';
import React from 'react';
import Select, { OptionsType, ValueType } from 'react-select';

interface Option {
  label: string;
  value: string;
}

interface CustomSelectProps extends FieldProps {
  options: OptionsType<Option>;
  isMulti?: boolean;
}

const CustomSelect = ({
  field,
  form,
  options,
  isMulti = false,
}: CustomSelectProps) => {
  function onChange(option: ValueType<Option | Option[]>) {
    form.setFieldValue(
      field.name,
      option ? (option as Option[]).map((item: Option) => item.value) : [],
    );
  }

  const getValue = () => {
    if (options) {
      console.log('SelectMulti', field.value);
      return isMulti
        ? options.filter((option) => field.value.indexOf(option.value) >= 0)
        : options.find((option) => option.value === field.value);
    } else {
      return isMulti ? [] : ('' as any);
    }
  };

  return (
    <Select
      className="react-select-container"
      classNamePrefix="react-select"
      name={field.name}
      value={getValue()}
      onChange={onChange}
      options={options}
      isMulti={true}
      placeholder=" "
    />
  );
};

export default CustomSelect;

And i use it this way:

<Field
     name="permissions"
     id="permissions"
     component={CustomSelect}
     placeholder=" "
     options={permissions.map((permissions) => ({
         value: permissions.id,
         label: permissions.description,
     }))}
 />

This component works well for recording my records, however when I want to change, I receive the API data and the data is not loaded in my field.

Any help is appreciated.

thomaslanenh · 2021-03-09T01:43:19Z

Hey everybody. I've gotten this code to work with a single select via this:

`import Select from 'react-select';
import { useField } from 'formik';

export default function SelectField(props) {
const [field, state, { setValue, setTouched }] = useField(props.field.name);

const onChange = ({ value }) => {
setValue(value);
};

return <Select {...props} onChange={onChange} onBlur={setTouched} />;
}
`

and

<Field component={SelectField} name="campfeatures" options={selectObjects} />

How would I turn this into being capable of taking multi select?

Thanks for your help!

steelx · 2021-03-24T07:23:12Z

Thanks for the snippets! Here is a version for anyone who needs the multiple selection to work with formik (@tjugg):

import { FieldProps } from "formik";
import React from "react";
import Select from "react-select";
import { OptionsType, ValueType } from "react-select/lib/types";

interface Option {
  label: string;
  value: string;
}

interface CustomSelectProps extends FieldProps {
  options: OptionsType<Option>;
  isMulti?: boolean;
}

export const CustomSelect = ({
  field,
  form,
  options,
  isMulti = false,
}: CustomSelectProps) => {
  const onChange = (option: ValueType<Option | Option[]>) => {
    form.setFieldValue(
      field.name,
      isMulti
        ? (option as Option[]).map((item: Option) => item.value)
        : (option as Option).value
    );
  };

  const getValue = () => {
    if (options) {
      return isMulti
        ? options.filter(option => field.value.indexOf(option.value) >= 0)
        : options.find(option => option.value === field.value);
    } else {
      return isMulti ? [] : ("" as any);
    }
  };

  return (
    <Select
      name={field.name}
      value={getValue()}
      onChange={onChange}
      options={options}
      isMulti={isMulti}
    />
  );
};

thanks This works even with Formik and Chakra UI with bit changes :)

ivan-sakoman · 2021-04-12T15:12:52Z

I have issue here because onChange function require two types... this is the error: Generic type 'ValueType' requires 2 type argument(s).

i can set secound type to boolean but that makes me another problem, can anybody help me with this problem?

db306 · 2021-07-11T16:09:36Z

Updated above with couple typing and import fixes

import {FieldProps} from "formik";
import React from "react";
import Select, {OptionsType, ValueType} from "react-select";

interface Option {
    label: string;
    value: string;
}

interface FormikSelectProps extends FieldProps {
    options: OptionsType<Option>;
    isMulti?: boolean;
}

export const FormikSelect =
    ({
         field,
         form,
         options,
         isMulti = false,
     }: FormikSelectProps) => {
        const onChange = (option: ValueType<Option | Option[], boolean>) => {
            form.setFieldValue(
                field.name,
                isMulti
                    ? (option as Option[]).map((item: Option) => item.value)
                    : (option as Option).value
            );
        };

        const getValue = () => {
            if (options) {
                return isMulti
                    ? options.filter(option => field.value.indexOf(option.value) >= 0)
                    : options.find(option => option.value === field.value);
            } else {
                return isMulti ? [] : ("" as any);
            }
        };

        return (
            <Select
                name={field.name}
                value={getValue()}
                onChange={onChange}
                options={options}
                isMulti={isMulti}
            />
        );
    };

FreTimmerman · 2021-07-27T15:03:36Z

@db306

isMulti
    ? (option as Option[]).map((item: Option) => item.value)
    : (option as Option).value

instead of casting, you would better have a typeguard to let TS know the difference between option and option[]:

option instanceof Array
    ? option.map((item) => item.value)
    : option.value,

hdsand · 2021-08-17T07:48:52Z

This is not working for me: onBlur={field.onBlur}

The issue is that inside of Formik#handleBlur is the following code:
    var _a = e.target,
        name = _a.name,
It's assuming that the input that gets blurred has a name attribute which is the same as the name that formik is using to reference the field. But since the input attribute here is internal to react-select, it has a generic name. So after I blur, formik.touched is {"react-select-3-input":true}

It works if I do this instead:
       onBlur: function() {
            formik.setFieldTouched(field.name);
        }
Am I doing something wrong here? Is this onBlur approach working for other people?

thanks, it works!

johnhailu · 2021-09-07T08:51:50Z

I hope it will help someone
Usage

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
  ]

<SelectInput name="courseAssignmentId" label="Course Assignment">
    {options.map((option) => (
    <option key={option.value} value={option.value}>
        {option.label}
    </option>
    ))}
</SelectInput>`

my implementation with bootstrap 5

/* eslint-disable react/prop-types */
import React from "react";

import { useField } from "formik";
import Select from "react-select";

function SelectInput({ label, ...props }) {
  const [field, meta, { setValue, setTouched }] = useField(props);
  const options = props.children.map((option) => ({
    value: option.props.value,
    label: option.props.children,
  }));

  const onChange = ({ value }) => {
    setValue(value);
  };

  return (
    <div className="mb-3">
      <label htmlFor={props.id || props.name} className="form-label">
        {label}
      </label>
      <Select
        defaultValue={options.find((option) => option.value === field.value)}
        options={options}
        onChange={onChange}
        onBlur={setTouched}
      />
      {meta.touched && meta.error ? (
        <div className="form-text text-danger">{meta.error}</div>
      ) : null}
    </div>
  );
}
export default SelectInput;

Matt-Hill-83 · 2021-09-14T18:42:05Z

This is great. thx!

jimryanzulueta · 2021-09-27T08:49:02Z

Did react-select just change its type definitions? Definitely not seeing OptionsType and ValueType

asgeo1 · 2021-10-13T01:24:25Z

Did react-select just change its type definitions? Definitely not seeing OptionsType and ValueType

Yes, in v5 the types are different: https://react-select.com/upgrade

OptionsType => Options
ValueType => OnChangeValue

ocobble · 2022-01-07T21:17:26Z

Here's my implementation of an async multi select component used with Formik. This gist was really helpful for me in creating this, but I didn't see any other posts with both async and multi select so I'll add it here.

import { useField, FieldProps } from "formik";
import React from "react";
import AsyncSelect from "react-select/async"

const getOptions = () => {
     return [{value: "1", label: "Test one"}, {value: "2", label: "Test two"}];
  };

  const promiseOptions = () =>
    new Promise((resolve) => {
        timeout(resolve(getOptions()),
        1000);
    });

const asyncMultiSelect = ({
  label,
  ...props
}) => {

  const [field, meta, helpers] = useField(props);

  const { setValue } = helpers;

  const onChange = (option) => {
    setValue(
       (option).map((item) => item.value)
     );
  };

  return (
    <div>
      <label>{label}</label>

      <AsyncSelect
        defaultOptions
        loadOptions={promiseOptions}
        name={field.name}
        onChange={onChange}
        isMulti
      />
      
    </div>
  );
};

export default asyncMultiSelect;

Here's the code in the file with the Formik form:

<Field as={asyncMultiSelect} label="Make a selection" name="mySelect" />

ken-muturi · 2023-04-16T15:52:25Z

Updated above with couple typing and import fixes

import {FieldProps} from "formik";
import React from "react";
import Select, {OptionsType, ValueType} from "react-select";

interface Option {
    label: string;
    value: string;
}

interface FormikSelectProps extends FieldProps {
    options: OptionsType<Option>;
    isMulti?: boolean;
}

export const FormikSelect =
    ({
         field,
         form,
         options,
         isMulti = false,
     }: FormikSelectProps) => {
        const onChange = (option: ValueType<Option | Option[], boolean>) => {
            form.setFieldValue(
                field.name,
                isMulti
                    ? (option as Option[]).map((item: Option) => item.value)
                    : (option as Option).value
            );
        };

        const getValue = () => {
            if (options) {
                return isMulti
                    ? options.filter(option => field.value.indexOf(option.value) >= 0)
                    : options.find(option => option.value === field.value);
            } else {
                return isMulti ? [] : ("" as any);
            }
        };

        return (
            <Select
                name={field.name}
                value={getValue()}
                onChange={onChange}
                options={options}
                isMulti={isMulti}
            />
        );
    };

I am having issues with my form using this custom component. The values are not added to formik field values. To explain in detail, I have a select which change, determines the values to pre-select on my custom react-select input (note values here not options). This also cascades this down to a 3rd input. These is a cascading inputs seem to be getting the values, however, the this values are on in the field value object. Please note that because this is a dynamic input am not able to use initialValues object. So i somewhat use the formik props to get the selected values and cascade down. see screenshots below

alexluongfm · 2023-07-11T05:21:00Z

React select (single select) that uses more of the formik hooks to reduce props passing and keep everything as simple as possible. Must be under the <Formik>/<Form> code to ensure hooks all work properly.

import React from 'react';
import Select, { Options } from 'react-select';
import { useField } from 'formik';

type Props = {
  selectOptions: Options[],
  formikFieldName: string,
  placeholder?: string,
};

/**
 * React Select but hooked into Formik
 * @returns {JSX.Element}
 * @constructor
 */
const FormikSelect = ({
  selectOptions,
  formikFieldName,
  placeholder,
}: Props) => {
  // eslint-disable-next-line no-unused-vars
  const [field, _, helpers] = useField(formikFieldName);
  const { setValue } = helpers;

  return (
    <Select
      defaultValue={selectOptions.find(
        (option) => option.value === field.value
      )}
      options={selectOptions}
      placeholder={placeholder}
      onBlur={field.onBlur}
      onChange={(option) => setValue(option.value)}
    />
  );
};

FormikSelect.defaultProps = {
  placeholder: '',
};

export default FormikSelect;

Example usage

        <FormikSelect
          selectOptions={[
            { value: 'foo', label: 'Foo' },
            { value: 'bar', label: 'Bar' },
          ]}
          formikFieldName="formikInitVals.shippingMethods"
          placeholder="Shipping Methods"
        />

Versions

formik: 2.4
react: 18.2

rever96 · 2023-08-11T17:57:13Z

@alexluongfm with your versions still gives Generic type 'Options' requires 1 type argument(s). error on line 6

"react-select": "^5.7.4",

IlyaZha · 2023-09-22T06:01:23Z

My Solution for react-select@^5.7.4:

export default function MultipleSelect({ fieldName, placeholder, ...props }) {
  const [field, meta, { setValue }] = useField(fieldName);
  const options = props.children.map((option) => ({
    value: option.props.value,
    label: option.props.children,
  }));

  const onChange = (selectedOptions: MultiValue<any>) => {
    setValue(selectedOptions);
  }

  return (<>
    <Select
      isMulti={true}
      defaultValue={options.find((option) => option.value === field.value)}
      placeholder={placeholder}
      onChange={onChange}
      options={options}
      onBlur={field.onBlur}
    />
  </>);
}

Form of select should be wrapped with <Formik></Formik>

shavonn · 2024-10-14T23:28:05Z

I just did this...
onValueChange={(val) => formik.setFieldValue('timezone', val)}

hubgit/SelectField.tsx

SuryaWebfox commented Jul 7, 2020 •

edited

Loading

ayush-shta commented Jul 21, 2020

torian257x commented Aug 15, 2020

justadhoc commented Aug 18, 2020 •

edited

Loading

mihailsitnic commented Sep 14, 2020

quinceleaf commented Sep 19, 2020 •

edited

Loading

dqtkien commented Oct 13, 2020 •

edited

Loading

Dollique commented Dec 30, 2020

lucasrisatto commented Feb 4, 2021

thomaslanenh commented Mar 9, 2021

steelx commented Mar 24, 2021

ivan-sakoman commented Apr 12, 2021

db306 commented Jul 11, 2021

FreTimmerman commented Jul 27, 2021

hdsand commented Aug 17, 2021

johnhailu commented Sep 7, 2021 •

edited

Loading

Matt-Hill-83 commented Sep 14, 2021

jimryanzulueta commented Sep 27, 2021 •

edited

Loading

asgeo1 commented Oct 13, 2021

ocobble commented Jan 7, 2022 •

edited

Loading

ken-muturi commented Apr 16, 2023 •

edited

Loading

alexluongfm commented Jul 11, 2023

rever96 commented Aug 11, 2023

IlyaZha commented Sep 22, 2023 •

edited

Loading

shavonn commented Oct 14, 2024

	const options = [
	{ value: 'foo', label: 'Foo' },
	{ value: 'bar', label: 'Bar' },
	]

	return <Field name={'example'} component={SelectField} options={options} />

	import { FieldProps } from 'formik'
	import React from 'react'
	import Select, { Option, ReactSelectProps } from 'react-select'

	export const SelectField: React.SFC<ReactSelectProps & FieldProps> = ({
	options,
	field,
	form,
	}) => (
	<Select
	options={options}
	name={field.name}
	value={options ? options.find(option => option.value === field.value) : ''}
	onChange={(option: Option) => form.setFieldValue(field.name, option.value)}
	onBlur={field.onBlur}
	/>
	)

hubgit/SelectField.tsx

SuryaWebfox commented Jul 7, 2020 • edited Loading

ayush-shta commented Jul 21, 2020

torian257x commented Aug 15, 2020

justadhoc commented Aug 18, 2020 • edited Loading

mihailsitnic commented Sep 14, 2020

quinceleaf commented Sep 19, 2020 • edited Loading

dqtkien commented Oct 13, 2020 • edited Loading

Dollique commented Dec 30, 2020

lucasrisatto commented Feb 4, 2021

thomaslanenh commented Mar 9, 2021

steelx commented Mar 24, 2021

ivan-sakoman commented Apr 12, 2021

db306 commented Jul 11, 2021

FreTimmerman commented Jul 27, 2021

hdsand commented Aug 17, 2021

johnhailu commented Sep 7, 2021 • edited Loading

Matt-Hill-83 commented Sep 14, 2021

jimryanzulueta commented Sep 27, 2021 • edited Loading

asgeo1 commented Oct 13, 2021

ocobble commented Jan 7, 2022 • edited Loading

ken-muturi commented Apr 16, 2023 • edited Loading

alexluongfm commented Jul 11, 2023

Versions

rever96 commented Aug 11, 2023

IlyaZha commented Sep 22, 2023 • edited Loading

shavonn commented Oct 14, 2024

SuryaWebfox commented Jul 7, 2020 •

edited

Loading

justadhoc commented Aug 18, 2020 •

edited

Loading

quinceleaf commented Sep 19, 2020 •

edited

Loading

dqtkien commented Oct 13, 2020 •

edited

Loading

johnhailu commented Sep 7, 2021 •

edited

Loading

jimryanzulueta commented Sep 27, 2021 •

edited

Loading

ocobble commented Jan 7, 2022 •

edited

Loading

ken-muturi commented Apr 16, 2023 •

edited

Loading

IlyaZha commented Sep 22, 2023 •

edited

Loading