gabrielbull / gabrielbull/react-desktop

TypeError: this.input.focus is not a function

Open
#102 1 comment 0 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
9.5k
Forks
447
PR merge metrics
No merged PRs in 30d

Description

This is the simplest app that produces this error (generated using `create-react-app`):

```es6
import React, { Component } from 'react';
import {TextInput} from 'react-desktop/macOs'

class App extends Component {
focus() {
this.input.focus();
}

render() {
return (


{ this.input = input; }}/>
this.focus()}>Focus

);
}
}
```

When I click the button I get:

```
App.js:8 Uncaught TypeError: this.input.focus is not a function
at App.focus (App.js:8)
at onClick (App.js:15)
at HTMLUnknownElement.callCallback (react-dom.development.js:540)
at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
at Object.invokeGuardedCallback (react-dom.development.js:436)
at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:450)
at executeDispatch (react-dom.development.js:834)
at executeDispatchesInOrder (react-dom.development.js:856)
at executeDispatchesAndRelease (react-dom.development.js:954)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:965)
at Array.forEach ()
at forEachAccumulated (react-dom.development.js:933)
at processEventQueue (react-dom.development.js:1105)
at runEventQueueInBatch (react-dom.development.js:3600)
at handleTopLevel (react-dom.development.js:3609)
at handleTopLevelImpl (react-dom.development.js:3340)
at batchedUpdates (react-dom.development.js:11066)
at batchedUpdates (react-dom.development.js:2323)
at dispatchEvent (react-dom.development.js:3414)
```

Although I see that it's implemented: https://github.com/gabrielbull/react-desktop/blob/master/src/textInput/macOs/textInput.js#L146

Contributor guide

Open the contributing guide

Research direction

Start with src/textInput/macOs/textInput.js at the focus implementation referenced in the issue, then reproduce the failure with the minimal create-react-app example. Done means the TextInput ref exposes a working focus method when the button is clicked without the TypeError.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.