Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeError: Cannot read property 'focus' of undefined

See original GitHub issue

Hello. I’m trying to focus on the textarea on a button click. I’m using react-textarea-autosize version 7.1.2.

This is my code:

const Input = props => {
    let textarea;
    return (
    <>
        <button onClick={() => { textarea.focus() }>Comment</button>
        <TextareaAutosize inputRef={tag => (textarea = tag)} name="comment" type="text" 
        placeholder="Input..." />
    </>
    )
}

However when I press the button, I get the following error:

TypeError: Cannot read property 'focus' of undefined

It works fine when using a normal textarea.

The full stack:

HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:336
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:385
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:440
invokeGuardedCallbackAndCatchFirstError
node_modules/react-dom/cjs/react-dom.development.js:454
executeDispatch
node_modules/react-dom/cjs/react-dom.development.js:584
executeDispatchesInOrder
node_modules/react-dom/cjs/react-dom.development.js:609
executeDispatchesAndRelease
node_modules/react-dom/cjs/react-dom.development.js:713
executeDispatchesAndReleaseTopLevel
node_modules/react-dom/cjs/react-dom.development.js:722
forEachAccumulated
node_modules/react-dom/cjs/react-dom.development.js:694
runEventsInBatch
node_modules/react-dom/cjs/react-dom.development.js:739
runExtractedPluginEventsInBatch
node_modules/react-dom/cjs/react-dom.development.js:880
handleTopLevel
node_modules/react-dom/cjs/react-dom.development.js:5803
batchedEventUpdates$1
node_modules/react-dom/cjs/react-dom.development.js:24401
batchedEventUpdates
node_modules/react-dom/cjs/react-dom.development.js:1415
dispatchEventForPluginEventSystem
node_modules/react-dom/cjs/react-dom.development.js:5894
attemptToDispatchEvent
node_modules/react-dom/cjs/react-dom.development.js:6010
dispatchEvent
node_modules/react-dom/cjs/react-dom.development.js:5914
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js:697
runWithPriority$2
node_modules/react-dom/cjs/react-dom.development.js:12149
discreteUpdates$1
node_modules/react-dom/cjs/react-dom.development.js:24417
discreteUpdates
node_modules/react-dom/cjs/react-dom.development.js:1438
dispatchDiscreteEvent
node_modules/react-dom/cjs/react-dom.development.js:5881

Issue Analytics

State:
Created 3 years ago
Comments:8 (2 by maintainers)

Top GitHub Comments

1reaction

Andaristcommented, Apr 14, 2020

Closing as the issue got resolved by OP with the help of @vanejung (❤️ )

1reaction

vanejungcommented, Apr 13, 2020

Yep, that works too 👍

Top Results From Across the Web

"Uncaught TypeError: Cannot read property 'focus' of null ...

javascript - Receiving Error Message: "Uncaught TypeError: Cannot read property 'focus' of null" when trying to call focus() to an element ID - ......

Cannot read property 'focus' of Null in JavaScript | bobbyhadz

The "Cannot read property 'focus' of null" error occurs when trying to call the focus() method on a null value. To solve the...

Uncaught TypeError: Cannot read property 'focus' of ... - GitHub

I met error when I use renderInputComponent API. autosuggest.js:698 Uncaught TypeError: Cannot read property 'focus' of undefined at Object.

JavaScript error: Cannot read property "focus" of null

I have an issue when applying this Javascript to focus an input. This error appears to me. I have this JavaScript and when...

InError set by the client. Client Error: Cannot read property ...

Error : InError set by the client. Client Error: Cannot read property 'focus' of undefined. 13 Answers 387 Views. General Discussions.