How to prevent select event from firing after every input?

Question

I'm trying to create a custom text editor in React, thus I've created a div which has a contentEditable attribute. Now I want to perform some action when the user selects a part of the inputted text. To do that I'm using the select event as onSelect attribute on my div. The problem is that, select event runs not only when selecting the text, but also when I click on the input box, or after any input. How can I prevent it, so that it gets fired only when the text is selected ?

Component:

function EditorBody(props) {
  return (
    <div className="editor-body">
      <div
        className="text-section"
        contentEditable
        role="textbox"
        placeholder="Text goes here ..."
        onSelect={() => window.alert("You've selected a text")} // Runs after every input, not only when the text is selected
      ></div>
    </div>
  );
}

export default EditorBody;

When you say "the user selects a part of the inputted text" do you mean to highlight the text, or just place the cursor somewhere near some specific text? — silencedogood, Oct 05 '21 at 17:30
Does this answer your question? [Select Text & highlight selection or get selection value (React)](https://stackoverflow.com/questions/43184603/select-text-highlight-selection-or-get-selection-value-react) — silencedogood, Oct 05 '21 at 17:46
@silencedogood Not really, unfortunately. My problem is event being fired even after every input, when normally it shouldn't be. — noiseymur, Oct 05 '21 at 18:04
Well... As that answer points out, I think using onMouseUp would be a more proper event here if your looking to select highlighted text. With this event, you can check if the selection is greater than zero. If it is, run your selection method. If not, do nothing. — silencedogood, Oct 05 '21 at 18:07

score 1 · Accepted Answer · answered Oct 05 '21 at 17:48

1

You can change the logic in your onSelect to be able to determine whether or not to execute the selected logic.

onSelect={(event) => {
  if (document.getSelection().toString().length > 0) {
     // your selection logic
     window.alert(document.getSelection().toString());
  }
}}

This way the logic will be executed only if the user is selecting something and not on other primary events that might set off the secondary select event (focus, keypress, etc).

answered Oct 05 '21 at 17:48

Matt Croak

2,788
2
17
35

This workaround is quite nice actually. Thanks a lot. And by the way, I just discovered that mouseUp and mouseDown events are not getting fired in React. Maybe you might know any fix for this problem too ? – noiseymur Oct 05 '21 at 18:06
1

@seymurium glad it works! In react you actually don't use `mouseUp` or `mouseDown` you would use `onMouseUp` and `onMouseDown`. – Matt Croak Oct 05 '21 at 18:08
Sorry, I actually meant onMouseUp and onMouseDown. They're not getting fired for some reason – noiseymur Oct 05 '21 at 18:10
@seymurium Would you happen to have another question/code example on stack for it? There are a number of reasons why they might be buggy but I don't see any use of them in the code for this question – Matt Croak Oct 05 '21 at 18:13
Man, don't know how, but now somehow they started working, lol :D Thanks for the discussion ! – noiseymur Oct 05 '21 at 18:18
@seymurium haha happens sometimes. No problem at all! – Matt Croak Oct 05 '21 at 18:26

How to prevent select event from firing after every input?

1 Answers1