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

Utilizing Nuxt Axios to assign response data to a variable will dynamically modify the content of the

Encountering the error message "TypeError: setValue is not a function" while trying to pass it as a

Interested in accessing JSON data from another domain? CORS has got you covered

Employing the powerful Math.pow() function within the setState() method

What is the best way to send props to a React component?

Inserting a file read using Node.js into a MongoDB database

What is the process for implementing a click event and accessing the DOM within an iframe using react-frame-component?

issue with data binding in ons-dialog

What is the most effective way to loop and render elements within JSX?

Updating image source dynamically with Flask

Attempting to retrieve dynamically generated input fields and cross-reference them with structured length .json data

Tips on using the Hover property in CSS for an element that includes both :after and :before properties

JavaScript code must be tailored to reference a JS file based on the specific environment, whether it be Production, Development, or staging

Check the output of the ChildProcess after executing a shell command

larger breakpoints are always overridden by smaller breakpoints

How can data be passed from a directive to a controller in Angular?

Missing Bootstrap 3 Options Menu trip away

Align a child element to the top and another child element to the center within a flexbox column

I am experiencing difficulties with the PHP login form on MAMP as it is not loading properly, displaying only a

Unable to extract attributes from a different model within Sails.js