Prevent text selection on double click in a React component

Question

I have a react component that displays some text inside a div. I also have a double click handler on the div. Everything works fine except the text is shown as selected when the user double clicks on it. This is to be expected, but I want to prevent this happening.

I tried to use event.preventDefault() but it made no difference. Any ideas?

var Example = React.createClass({
    toggle: function(e) {
        e.preventDefault();
    },

    render: function() {
        return (
            <div onDoubleClick={this.toggle}>
                Example text!
            </div>
        );
    }
});

score 3 · Answer 1 · answered Mar 05 '22 at 05:28

3

Try adding userSelect: 'none' -

<div onDoubleClick={this.toggle} style={{userSelect: 'none'}}>
    Example text!
</div>

answered Mar 05 '22 at 05:28

Brian Burns

20,575
8
83
77

score 1 · Accepted Answer · edited May 23 '17 at 12:02

1

You could try the CSS, attributes, and select event handler as in this question:

How to disable text selection using jQuery?

which should be doable just in the JSX. If that fails, you might try adding a componentDidUpdate handler, get the DOM node, and manipulate the selection range (see How can I highlight the text of the DOM Range object?)

edited May 23 '17 at 12:02

Community

1
1

answered Sep 24 '15 at 02:30

Tony K.

5,535
23
27

Prevent text selection on double click in a React component

2 Answers2