Why does my contenteditable="true" get activated even though I click somewhere else?

Question

Here is my code:

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  padding: 5px;
  background-color: rgb(200, 200, 200);
}

<div class="buttons">

  <div class="button">
    One
  </div>

  <div class="button">
    Two
  </div>

  <div class="button" tabindex="0" contenteditable="true" spellcheck="false">
    Three
  </div>

</div>

Now, if I click on the right side of the third button, not on the button anymore, just somewhere in the space on the right side, then still the third button gets activated. Why? This is so weird!

It happens only once!

And it helps to use inline-flex instead, but I need flex, and then it still happens if I click in the little space on the left side of the button to the next one.

Because you are setting it on a div, and obviously you click within that div.. AND you need to take the PADDING into that calculation. you can confirm this by temporarily adding a border to the div to know how much it extends.. — Ron, Jul 11 '23 at 09:36
to tell the truth from below the button going right any double click will trigger the content, i recommend you to use JS (https://stackoverflow.com/questions/12920225/text-selection-in-divcontenteditable-when-double-click?rq=1) — Simone Rossaini, Jul 11 '23 at 09:39
Maybe it's a weird solution, but it helps if I put a around the editable button. What do you think? — Anna_B, Jul 11 '23 at 09:43
**It's a Chromium bug** (and you can report it). Does not happen in Firefox. — Roko C. Buljan, Jul 11 '23 at 09:54

Marcus A. · Answer 1 · 2023-07-11T10:12:01.170

I found a possible solution for you're problem, what you could do, as you can see by the following example-fix, is that you move "contenteditable="true" spellcheck="false"" to your desired button instead of the flex-child itself, this will allow you to encapsulate the editable effect on the button to the button itself, instead of it's parent, which would be triggered when the given user is clicking the div! (As you can tell, I added another div for the content of you're "buttons, for this to work" )

Hopefully this solution does it for you!

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  padding: 5px;
  background-color: rgb(200, 200, 200);
}

<html>
  <div class="buttons">

    <div class="button">
      <div>One</div>
    </div>

    <div class="button">
      <div>Two</div>
    </div>

    <div class="button">
      <div contenteditable="true" spellcheck="false">Three</div>
    </div>

  </div>
</html>

Best regards! Marcus A.

It seems to be working fine, so it is a good solution – Kamikaza Jul 11 '23 at 10:33 — Kamikaza, Jul 11 '23 at 10:33

score 1 · Accepted Answer · answered Jul 11 '23 at 11:12

Very Simple Workaround

As @RokoC.Buljan noted in a comment, the problem appears to be a Chromium bug.

The simple workaround is to add a <wpr> tag after the last button. This Line Break Opportunity is essentially an empty element. Yet, you could also use a   non-breaking space entity, which works equally well.

Test Snippet

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  padding: 5px;
  background-color: rgb(200, 200, 200);
}

<h4>1. Original without workaround</h4>
<div class="buttons">
  <div class="button">
    One
  </div>
  <div class="button">
    Two
  </div>
  <div class="button" tabindex="0" contenteditable="true" spellcheck="false">
    Three
  </div>
</div>

<h4>2. Using a word-break opportunity tag</h4>
<div class="buttons">
  <div class="button">
    One
  </div>
  <div class="button">
    Two
  </div>
  <div class="button" tabindex="0" contenteditable="true" spellcheck="false">
    Three
  </div>
  <wbr>
</div>

<h4>3. Using a non-breaking space entity</h4>
<div class="buttons">
  <div class="button">
    One
  </div>
  <div class="button">
    Two
  </div>
  <div class="button" tabindex="0" contenteditable="true" spellcheck="false">
    Three
  </div>
  &nbsp;
</div>

Why does my contenteditable="true" get activated even though I click somewhere else?

2 Answers2