React-draggable npm package prevents clicking inside input field

Question

I am using the npm package "react-draggable" to allow drag on an element that contains a form.

Now that I can drag around my element, I am very happy... But the input fields are not clickable as in you're not able to click and type. The only thing i can do is click and hold to then type.

Snippet:

render() {
        return (
            <Draggable>
                <div className="pokedex">
                    <div className="screen">
                        {this.state.isSearching ? (<Loader/>) : null}
                        {this.state.hasFound ? this.renderResult() : null}
                        {this.state.hasError ? (<p className="text-center error">{this.state.hasError}</p>) : null}
                    </div>
                    <form onSubmit={(e) => this.onSubmit(e)}>
                        <input className="field" type="text" placeholder="Who is this pokemon?" onChange={(e) => this.setPokemon(e.target.value)}/>
                        {this.state.isSearching ? <input className="button text-center" disabled type="submit" value="Find!"/> : <input className="button text-center" type="submit" value="Find!"/>}
                    </form>
                    <div className="button-group">
                        <div className="blue-button"/>
                        <div className="green-button"/>
                        <div className="orange-button"/>
                    </div>
                </div>
            </Draggable>
        )
    }

Is there a way to avoid this kind of behaviour?

Answer 1

Adding event.stopPropagation() onMouseDown did the trick!

Prevents further propagation of the current event in the capturing and bubbling phases.

Snippet:

render() {
        return (
            <Draggable>
                <div className="pokedex">
                    <div className="screen">
                        {this.state.isSearching ? (<Loader/>) : null}
                        {this.state.hasFound ? this.renderResult() : null}
                        {this.state.hasError ? (<p className="text-center error">{this.state.hasError}</p>) : null}
                    </div>
                    <form onSubmit={(e) => this.onSubmit(e)}>
                        <input onMouseDown={(e) => {e.stopPropagation()}}  className="field" type="text" placeholder="Who is this pokemon?" onChange={(e) => this.setPokemon(e.target.value)}/>
                        {this.state.isSearching ? <input className="button text-center" disabled type="submit" value="Find!"/> : <input className="button text-center" type="submit" value="Find!"/>}
                    </form>
                    <div className="button-group">
                        <div className="blue-button"/>
                        <div className="green-button"/>
                        <div className="orange-button"/>
                    </div>
                </div>
            </Draggable>
        )
    }