Focus on next Input field on Enter in Redux Form

Question

I want to define a HOC(higher order Component) which will be responsible for handling the functionality. import React, { Component } from 'react';

const NextFieldOnEnter = WrappedContainer =>
  class extends Component {
    componentDidMount() {
      console.log('hoc', this.refs);
      //move to next input field
    }
    render() {
      return <WrappedContainer {...this.props} />;
    }
  };
export default NextFieldOnEnter;

It says this.refs is deprecated. So how can I achieve tab like behavior when enter key is pressed. My form is

<Form>
<Field
  withRef
  hasFeedback
  name="name"
  ref={ref => {
    this.field1 = ref;
  }}
  refField = "field1"
  component={makeField}
  type="date"
/>  
<Field
    withRef
    hasFeedback
    name="address"
    ref={ref => {
      this.field2 = ref;
    }}
     refField ="field2"
    component={makeField}
    type="date"
  />
</Form>

//makefield

render() {
  const {type, input, label, ref, refField, ...rest} = this.props;
  return (
    <Form.Item
      label={label}
      colon={false}
      type={type}
      value={value}
      ref={ref}
    >
      <Input {...props} />
    </Form.Item>
  );
}

Can you replicate this code in codesandbox for the community to review. — Adeel Imran, Sep 02 '18 at 12:34

score 1 · Accepted Answer · answered Sep 02 '18 at 11:01

1

In your constructor method define your ref like this

constructor(props) {
  super(props);
  this.field1 = React.createRef();
  this.field2 = React.createRef();
}

In your render where you are using ref do this.

<Field
  withRef
  hasFeedback
  name="name"
  ref={this.field1} // Proper way to assign ref in react ver 16.4
  refField = "field1"
  component={makeField}
  type="date"
/>

Reference Refs Documentation React

answered Sep 02 '18 at 11:01

Adeel Imran

13,166
8
62
77

1

it throws an error: _react2.default.createRef is not a function – Anita Sep 02 '18 at 12:14
which version of React are you using? – Adeel Imran Sep 02 '18 at 12:34
"react": "^16.2.0" – Anita Sep 02 '18 at 14:23
You need to use react ^16.4 (the latest one) – Adeel Imran Sep 02 '18 at 17:17

score 1 · Answer 2 · answered May 31 '19 at 20:30

This is how I solved this issue:
My Form with the field components:
When expirationDate field is active and the user presses the next key, the focus goes to the next field called securityCode . Also, when securityCode is active, and the user presses the next button, we submitted the form (because this is the last field of the form). This is why this Field has the onSubmitEditing prop defined.

<Form>
  <Field
    name={'expirationDate'}
    component={renderInputRef}
    withRef
    forwardRef
    ref={componentRef => (this.expirationDate = componentRef)}
    refField="expirationDate"
    onEnter={() => {
        try {
        this.cvc.getRenderedComponent().refs.cvc._root.focus();
        } catch {
        /*Do nothing */
        }
    }}
    onChange={(event, newValue) => {
        try {
            if (newValue?.length == 5) {
                this.cvc.getRenderedComponent().refs.cvc._root.focus();
            }
        } catch {
        /*Do nothing */
        }
    }}
  />

  <Field
    name={'securityCode'}
    component={renderInputRef}
    onSubmitEditing={!invalid ? handleSubmit(this.submit) : null}
    accessibilityLabel={'new-card-cvc'}
    keyboardType={'number-pad'}
    withRef
    forwardRef
    refField="cvc"
    ref={componentRef => (this.cvc = componentRef)}
  />
</Form>

And the renderInputRef component: (In this project we're using native-base, but it's almost the same without it.)

export class renderInputRef extends PureComponent<Props> {
 render() {
  const {
    input,
    onEnter,
    refField,
    display,
    description,
    iconRight,
    meta: { touched, warning },
    ...custom
  } = this.props;
  var hasError = touched && (error !== undefined || warning !== undefined);
  return (
    <React.Fragment>
      <Item 
        withRef
        forwardRef
      >
        <Input
          ref={refField}
          returnKeyType={'next'}
          onSubmitEditing={onEnter}
          {...input}
          {...custom}
        />
      </Item>
    </React.Fragment>
  );
 }
}

score 0 · Answer 3 · answered Sep 02 '18 at 16:52

0

You can use callback ref funtion to create an array of refs that can be used for cycling between fields. It will work with 16.2 and newer.

Show solution when ready ;)

answered Sep 02 '18 at 16:52

xadm

8,219
3
14
25

Focus on next Input field on Enter in Redux Form

3 Answers3

Linked