Can not get autoFocus to work

[fiws]

The prop simply does nothing for me:

[121watts]

Can confirm. Same issue here

[scniro]

@fiws @121watts sorry for the late response. I'll definitely look into this over the weekend and either get a fix up or clarify the documentation.

[Adam13531]

I did some investigation into this just now.

The cm class is not being constructed with options passed in (which is where autofocus would actually take effect):

react-codemirror2 side of things:

react-codemirror2/src/index.tsx

Line 443 in 3250f58

this.editor = cm(this.ref) as IInstance;

CodeMirror side of things:

if (options.autofocus && !mobile) display.input.focus()

Instead, hydrate is called later in componentDidMount, which triggers a call to setOption in CodeMirror directly (source here). This just doesn't have a handler for autofocus, so nothing is done to focus the input.

I hope that's helpful. I can't prioritize making a pull request for this right now, so I haven't looked into the best solution. 🙁

[scniro]

@Adam13531 thanks for doing some investigative work on this, it'll surely help. I'm planning on knocking this out over the weekend and will post an update here 👍

[scniro]

@Adam13531 @121watts @fiws This should now be fixed with the 5.0.0 release. I've done away with the autoFocus prop entirely in favor of the codemirror options={{ autofocus: true }}. As @Adam13531 pointed out, there simply wasn't a handler for this, so we just trigger it on componentDidMount

if (this.editor.getOption('autofocus')) {
  this.editor.focus();
}

[121watts]

awesome! thanks for the speedy response / resolution

[Adam13531]

@scniro thanks a ton for the fix! I tried it out and it's working. 👍