Field not touched when using up/down arrow selectors on type='number' Fields

[esr52]

Bug report

Current Behavior

Using up/down "scoller" arrows with mouse on number type Field, setFieldTouched not set. I'm depending on the touched field to enable an update button. Seems redundant to have to click inside the field after changing the value using the scoller arrows.

Expected behavior

When up/down arrow clicked, setFieldTouched should trigger

Reproducible example

<Formik
      initialValues={{
        ...initVals,
      }}
      validationSchema={mylValidationSchema}
      onSubmit={onSubmit}
      enableReinitialize
    >
      {(
        { values, setFieldValue, touched, dirty, isValid, handleBlur } // this is for DatePicker
      ) => (
        <Form styling='structure'>
        ...
                  <div className='block ml-5'>
                        <div className='d-flex'>
                          <div className='input-group'>
                            <Label htmlFor='correctionFactor'>
                              Correction Factor
                            </Label>
                          </div>
                          <Field
                            id='correctionFactor'
                            name='correctionFactor'
                            type='number'
                          />
                        </div>
                        <ErrorMessage
                          name='correctionFactor'
                          component={TextError}
                        />
                      </div>
                      ...
          </Form>)}
    </Formik>

Suggested solution(s)

Additional context

Your environment

Software	Version(s)
Formik	2.2.6
React	16.13.1
TypeScript
Browser	Firefox
npm/Yarn	npm
Operating System	MX Linux 19.3

[mkarajohn]

Not sure if this is an acceptable solution, but you could manually set it to touched by calling setFieldTouched when the value changes ( I suppose the onChange event does fire when you change the number with the buttons)

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days

[mkarajohn]

Commenting to remove the stale label

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days

[johnrom]

This is not what touched means. Touched occurs when a user left / blurred a field. It is a way for Formik to say "a user is done with this field and may want to know if there were any errors".

Are you saying that using the keyboard to update the value and then navigating away from the selectors doesn't result in touched?

[esr52]

My proposition is: Tabbing to the field, using arrow keys to select an value from the number scroller and then tabbing to the next field should blur the field without having to hit the “enter” key. That is not the current behavior...current behavior is you must hit the enter key to blur the field for type=“number”.

…

Sent from my mobile device

On Mar 3, 2021, at 12:44 PM, John Rom ***@***.***> wrote:  This is not what touched means. Touched occurs when a user left / blurred a field. It is a way for Formik to say "a user is done with this field and may want to know if there were any errors". — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[johnrom]

hmm.. interesting. Seems like a browser bug in Firefox to me, I would expect blur to happen as I described above.

Edit: it is a Firefox bug

[johnrom]

Some discussion here on workarounds: facebook/react#11062

I wouldn't probably implement anything like this in Formik itself. Any workarounds can be discussed here, though.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days