Control Focus of Multiple FormControl Fields

Question

I have a mapped list of input fields:

                      <FormControl
                            name={row_index}
                            value={barcode.barcode}
                            placeholder="Barcode - then Enter"
                            onChange={this.onChange}
                            onKeyPress={this._handleKeyPress}
                            disabled={barcode.submitted}
                        />

I am currently using onKeyPress to handle submit:

_handleKeyPress = (e) => {
    if (e.key === 'Enter') {
        const name = e.target.name;
        const barcodes = this.state.barcodes;
        const this_barcode = barcodes[name];

        let apiFormatted = {"barcode": this_barcode.barcode, "uid": this.props.currentSession}
        this.postBarcodeAPI(apiFormatted, name)
    }
}

I am attempting to focus on the next input field after the current one is successfully submitted. React documentation has an example for manually setting focus on a single input field using ref={(input) => { this.textInput = input; }} />. I have tried using this[‘textInput’+‘1’].focus() (using computed property names, but am getting an error that function is invalid.

EDIT

Per Chase's answer, I am linking to the autofocus documentation, although it doesn't work in this case.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/autofocus

Does my answer not work anymore? Looks like it was removed as the answer. — Chase DeAnda, Oct 16 '17 at 18:02
Part of it doesn't work, see my comment. But I re-accepted answer for alternative. — Avi Kaminetzky, Oct 16 '17 at 18:04

Avi Kaminetzky · Accepted Answer · 2017-10-17T20:12:54.087

My working solution:

const focusing = index === lastSubmittedIndex + 1 ? true : false;
const refText = focusing || index === 0 ? input => input && input.focus() : null;

                        <FormControl
                            name={row_index}
                            value={barcode.barcode}
                            placeholder="Barcode - then Enter"
                            onChange={this.onChange}
                            onKeyPress={this._handleKeyPress}
                            disabled={barcode.submitted || barcode.apiCalling}
                            inputRef={refText}
                        />

What I corrected in my code: 1) I am supposed to use inputRef instead of ref for Bootstrap's FormControl component, see here. 2) I am using ilya-semenov's very neat code.

Update I have other buttons on the page, when user presses them and is at bottom of page, page jumps up to top. Not sure why.

Hmm, okay so you are hacking the ref prop. Dirty but it works lol — Chase DeAnda, Oct 16 '17 at 20:04

score 1 · Answer 2 · answered Oct 04 '17 at 18:26

1

Unless you've set a ref with the key textInput1 then this won't work. Another suggestion would be to move all of the inputs into a separate component and then you can use this.props.children to traverse all your inputs and grab the input at whatever position you want.

EDIT:

You can also use the autoFocus prop to determine if an input should be focused or not.

answered Oct 04 '17 at 18:26

Chase DeAnda

15,963
3
30
41

autoFocus doesn't work: https://github.com/JedWatson/react-select/issues/1692. So storing ref's is the way to go. – Avi Kaminetzky Oct 16 '17 at 18:02
sorry, retracting again, i found a different solution which works for me – Avi Kaminetzky Oct 16 '17 at 19:40

Control Focus of Multiple FormControl Fields

2 Answers2

Linked