Effortlessly navigate between Formik Fields with automated tabbing

Question

Effortlessly navigate between Formik Fields with automated tabbing

I have a component that validates a 4 digit phone code. It functions well and has a good appearance. However, I am struggling with the inability to autotab between numbers. Currently, I have to manually navigate to each input field and enter the number. Is there a way to achieve this using Formik Field?

Here is an excerpt of my code:

<Formik
  onSubmit={values =>
    VerifyGarageFunc({ code: values.code.join(''), requestId: PhoneCodeData.data }, data.showModal)
  }>
  {({ values, handleChange, handleSubmit }) => (
    <form onSubmit={handleSubmit}>
      <FieldArray
        name="code"
        render={arrayHelpers => (
          <div className={styles.inputWrapper}>
            {values.code.map((item, index) => (
              <div key={index}>
                <Field
                  name={`code.${index}`}
                  type="text"
                  component={CustomInput}
                  onChange={handleChange}
                  value={values.code[index]}
                />
              </div>
            ))}
          </div>
        )}
      />
      <LoginActionButton onSubmit={handleSubmit} text={'Send'} />
      <FieldArray />
    </form>
  )}
</Formik>

I attempted to use https://www.npmjs.com/package/react-auto-tab but it seems to only work with <input/> and does not function properly with Formik Field.

P.S. My application is built with Next.js and React.js

javascript css reactjs next.js formik

Answer 1

Answer №1

If you're looking for a hook-based solution, consider trying out the React Pin Input Hook library. It handles the logic without dictating the display.

To implement this, create a new component called PinInput and set up a new field using the formik hook primitives.

I've provided an example on codesandbox here: CodeSandbox Example. Please note that the code in the sandbox may not match your specific components exactly, but it should give you a close approximation of what you need.

import React from 'react'
import { useField } from 'formik'
import { usePinInput } from 'react-pin-input-hook'

export const PinInput = (props) => {
     const [field, meta, helpers] = useField(props)
     const { fields } = usePinInput({
       values: field.value,
       onChange: (values) => {
         helpers.setValue(values)
       },
    })
    
    return fields.map((fieldProps, index) => 
      <CustomInput key={index} type="text" {...fieldProps} />
    )
}

In your main file, simply integrate the Pin Input into your Formik form. If you're using the Form component from Formik, you won't have to manually bind the onSubmit event - the button can just be of "submit" type:

<Formik
  onSubmit={values =>
    VerifyGarageFunc({ code: values.code.join(''), requestId: PhoneCodeData.data }, data.showModal)
  }>
     <Form>
        <PinInput name="code" />
        <LoginActionButton type="submit" text={'Send'} />
     </Form>
</Formik>

Keep in mind that the library requires your CustomComponent to attach a ref to the input element. Make sure your component supports the necessary events like onBlur, onFocus, onChange, and onKeyDown.

Answer 2

If you're looking for a hook-based solution, consider trying out the React Pin Input Hook library. It handles the logic without dictating the display.

To implement this, create a new component called PinInput and set up a new field using the formik hook primitives.

I've provided an example on codesandbox here: CodeSandbox Example. Please note that the code in the sandbox may not match your specific components exactly, but it should give you a close approximation of what you need.

import React from 'react'
import { useField } from 'formik'
import { usePinInput } from 'react-pin-input-hook'

export const PinInput = (props) => {
     const [field, meta, helpers] = useField(props)
     const { fields } = usePinInput({
       values: field.value,
       onChange: (values) => {
         helpers.setValue(values)
       },
    })
    
    return fields.map((fieldProps, index) => 
      <CustomInput key={index} type="text" {...fieldProps} />
    )
}

In your main file, simply integrate the Pin Input into your Formik form. If you're using the Form component from Formik, you won't have to manually bind the onSubmit event - the button can just be of "submit" type:

<Formik
  onSubmit={values =>
    VerifyGarageFunc({ code: values.code.join(''), requestId: PhoneCodeData.data }, data.showModal)
  }>
     <Form>
        <PinInput name="code" />
        <LoginActionButton type="submit" text={'Send'} />
     </Form>
</Formik>

Keep in mind that the library requires your CustomComponent to attach a ref to the input element. Make sure your component supports the necessary events like onBlur, onFocus, onChange, and onKeyDown.

Effortlessly navigate between Formik Fields with automated tabbing

Answer №1

Similar questions

Executing a function after the completion of another

An abundance of choices in the React dropdown

separating kids with selectors

Incorrect legend colors in Highcharts pie chart

What is the best way to incorporate Ajax into a Rails application?

Is it acceptable to assign a value to exports.new?

Angular Fragmentary Perspective

directive still running despite attempting to stop the service

How to Link to a new page using current page slugs in NextJS?

The functionality of Bootstrap pagination is incompatible with the angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js library

I encountered no response when attempting to trigger an alert using jQuery within the CodeIgniter framework

How can a JavaScript function be imported into a React component from a location outside the src folder?

Include two additional elements for action in a list

Encountered an error while configuring AWS Amplify using Amplify.configure(awsconfig)

Is it considered best practice to incorporate the Box component within the Grid component in MUI?

Creating a hover effect on a specific area of a map is a useful technique

The Typescript error occurs when trying to assign a 'string' type to a 'SetStateAction<null>'

The element is inferred to have an 'any' type due to the inability to use a 'string' type expression to index the 'Palette' type

Creating unique geometric designs with three.js

javascript utilizing underscorejs to categorize and aggregate information