<Draggable axis="y"
grid={[135,135]}
onStop={this.handleStop}
defaultPosition={{x: this.props.task.positionX, y: this.props.task.positionY,}}>
<div id="edit-task-ponent">
<form onSubmit={this.handleSubmit} id="edit-task-form" className="edit-task-form">
<input type="text" name="name" onChange={this.handleChange} placeholder="Name" value={this.state.name} required/>
<input type="text" name="description" onChange={this.handleChange} placeholder="Description" value={this.state.description} required/>
<button className="btn submit-btn" type="submit">Save </button>
</form>
</div>
</Draggable>
What happens is I will click on the input and it will focus for a split second then loses focus -- so i cant type in the input. I have to click on it a few times for it to actually focus, therefore allowing me to type in the input. How can I get it to stay focused after clicking once? I have tried setting autofocus to true after clicking the input but that didnt work either. Any ideas ?
<Draggable axis="y"
grid={[135,135]}
onStop={this.handleStop}
defaultPosition={{x: this.props.task.positionX, y: this.props.task.positionY,}}>
<div id="edit-task-ponent">
<form onSubmit={this.handleSubmit} id="edit-task-form" className="edit-task-form">
<input type="text" name="name" onChange={this.handleChange} placeholder="Name" value={this.state.name} required/>
<input type="text" name="description" onChange={this.handleChange} placeholder="Description" value={this.state.description} required/>
<button className="btn submit-btn" type="submit">Save </button>
</form>
</div>
</Draggable>
What happens is I will click on the input and it will focus for a split second then loses focus -- so i cant type in the input. I have to click on it a few times for it to actually focus, therefore allowing me to type in the input. How can I get it to stay focused after clicking once? I have tried setting autofocus to true after clicking the input but that didnt work either. Any ideas ?
Share Improve this question asked Sep 26, 2017 at 13:31 rgc998rgc998 3315 silver badges19 bronze badges 1-
Probably, your ponent is re-rendering - related also with
Draggable
IMO - ; that's why you lose focus on the input. – alpakyol Commented Sep 26, 2017 at 14:47
2 Answers
Reset to default 7Use
enableUserSelectHack
, this will not interfere with existing styleeg
<Draggable enableUserSelectHack={false}>
Use
cancel
propeg: give any class name, it doesn't matter
<Draggable cancel=".just-name"> <input className="just-name" placeholder="Add text here" /> </Draggable>
Via a handle
to enable drag is better and you can also avoid this kind of issue easily.
Here is the demo given by the official doc:
return (
<Draggable
axis="x"
handle=".handle"
start={{x: 0, y: 0}}
grid={[25, 25]}
zIndex={100}
onStart={this.handleStart}
onDrag={this.handleDrag}
onStop={this.handleStop}>
<div>
<div className="handle">Drag from here</div>
<div>This readme is really dragging on...</div>
</div>
</Draggable>
);
check its doc
the handle here is a CSS selector