Question 205332 in Html Question posted in
Some basic documentation can be found here.

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

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!

enter image description here

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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 &nbsp; 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search