React | Modal input field auto focus

reactjs autofocus
Maria Jeysingh Anbu picture Maria Jeysingh Anbu · Feb 28, 2018 · Viewed 14.2k times · Source

I'm using React and ant design for my project.

There I have a Popover and It has a button. when user click the button It shows the modal with Input field

Problem

When I click the Show Modal Button auto focus is not working and also popover is not hiding

I tried with HTML5 autoFocus 

<textarea autoFocus></textarea>

But it did not work. I have full code on stackblitz

Answer

Rosy Shrestha picture Rosy Shrestha · Dec 6, 2018

Add autoFocus={false} to your modal to reject the modal's focus management.

<Modal ... autoFocus={false}>

<textarea autoFocus={true}>

Related questions

Can you force a React component to rerender without calling setState?

I have an external (to the component), observable object that I want to listen for changes on. When the object is updated it emits change events, and then I want to rerender the component when any change is detected. With …

Read More
Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More
"SyntaxError: Unexpected token < in JSON at position 0"

In a React app component which handles Facebook-like content feeds, I am running into an error: Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0 I ran into a similar error which turned out to be a …

Read More