最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React - Draggable components with inputs lose the ability to focus when clicking that input - Stack Overflow

programmeradmin3浏览0评论
<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
Add a ment  | 

2 Answers 2

Reset to default 7
  1. Use enableUserSelectHack, this will not interfere with existing style

    eg <Draggable enableUserSelectHack={false}>

  2. Use cancel prop

    eg: 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

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论