selectEvent.select -- not updating Formik fieldValue/Context

[andreyorlov33]

Hello,
I am testing a react component wrapped in a Formik context
regular input fields work just fine - but for some reason Select fields do not update the Formik context

• @testing-library/react version: ^11.1.0
• "@testing-library/jest-dom": "^5.11.9",
• "react-select-event": "^5.3.0",

    <Formik
      initialErrors={initialError}
      initialValues={formInitialValues}
      validateOnChange
      validationSchema={formValidationSchema}
      onSubmit={async (values, { resetForm }) => {
        await createTransaction(values, client);
        resetForm();
      }}
    >

    {({ setFieldValue, values, handleSubmit, handleReset, errors }) => {
        return (
             <div>
      <InputGroup
        groupId="street1"
        isInvalid={touched.property?.address?.street1 && propertyErrors?.street1}
        isRequired
        pb={3}
        pt={5}
      >
        <InputLabel>Address</InputLabel>
        <Field as={Input} name="property.address.street1" />
        {touched.property?.address?.street1 && propertyErrors?.street1 && (
          <InputErrorMessage>{propertyErrors?.street1}</InputErrorMessage>
        )}
      </InputGroup>

        <InputGroup
          data-test-id="state-selection"
          flex={1}
          groupId="state"
          isInvalid={touched.property?.address?.state && propertyErrors?.state}
          isRequired
          pb={3}
          pt={5}
        >
          <InputLabel htmlFor="propertyState">State</InputLabel>
          <Select
            defaultValue={STATE_OPTIONS.find((option) => option.value === values.property.address.state)}
            value="state"
            isInvalid={propertyErrors?.state}
            inputId="propertyState"
            name="property.state"
            options={STATE_OPTIONS}
            onChange={(state: any) => {
              setFieldValue('property.address.state', state.value);
            }}
          />

        </InputGroup>             
        </div>
        );
      }}
    </Formik>

Test:

describe(`It should update Formik fields, ()=> {

beforeEach(()=> render(<FormikComponent />))

it(`should update all fields`, async() => {
 const address = screen.getByLabelText('Address*')})
  const state = screen.getByLabelText('State*');
  
 selectEvent.select(state, ['California']);

await waitFor(()=> {
       fireEvent.change(address, {
          target: { value: '1234 test street },
        });

screen.debug(address) 
/*
   <input
      aria-required="true"
      class="sc-bdnylx sc-bkbjAj iyVBML dUFQAF"
      font-family="Inter"
      font-size="[object Object]"
      id="street1"
      name="property.address.street1"
      required=""
      type="text"
      value="1234 test street"
    />
*/

screen.debug(state)

/*
    <input
      aria-autocomplete="list"
      class="css-62g3xt-dummyInput"
      id="propertyState"
      readonly=""
      tabindex="0"
      value=""
    />
*/
})
})

What you did:

The Address is updated with a fireEvent.chagne, works just fine.
The state, however does not get updated no matter the approach.
Also tried to set the value of the state select with an fireEvent.change (didn't work)
and with selectEvent.open(state) fireEvent.click(screen.getByText('California')) - also did not work.

Problem description:

Formik field value not updated with select event.

[wdfinch]

Hi I'm having a similar issue but with react-hook-form. Did you make any progress on this? I saw this related to bug #908, but this appears to affect inputs that return events onChange rather than final values (like react-select).

[eps1lon]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox, or a link to a repository on GitHub. The provided code contains references to variables that are not declared in the code, making it harder to reproduce the issue.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[wdfinch]

Makes sense. I can reproduce this locally with a minimal example but I'm struggling in code sandbox simply because I can't seem to select an item using react-select. I get an error whenever I try to select a value.

I posted an issue here, but if anyone knows how to do this, I would really appreciate some help

JedWatson/react-select#4894

@eps1lon would if it's not possible to select an element via react-select in code sandbox would you accept a zipped minimal project attached here that could be run locally? Is there some other way I can create a reproduction?

[eps1lon]

A cloneable repository works as well. Either as a zip or hosted on github.

[eps1lon]

Closing since no reproduction was provided in 3 months.