button on click event does not fire if active textarea has css to change size on focus

Question

As you can test in snippet if i focus textarea and click on button no action fires, i have to click one more time

removing focus style all works fine.

what can i do? thanks

textarea:focus{
  height:5rem;
}

<textarea class="dx-texteditor-input" spellcheck="true" tabindex="0" role="textbox" aria-multiline="true"></textarea>

<button onclick="alert('ok');">
test
</button>

Answer 1

In short, the UI Events specification explains a click for pointer devices as follows:

The click event type MUST be dispatched on the ... target indicated by the pointer, when the user presses down and releases the primary pointer button ... .

In you example we press down on the button, the button moves, and we release elsewhere (not on the button). We don't fulfill the conditions for a click event to be dispatched!

Ideally, UI elements shouldn't move during interactions. And, there is no need to resize the textarea automatically on focus; the user can already resize it to their liking by default.

---

Should you want to resize it regardless, simply position the button independently of the textarea, e.g.:

.text-box {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: start;
}

textarea:focus{height: 5rem}

<div class="text-box">
  <textarea></textarea>
  <button onclick="alert('ok');">test</button>
</div>

Or delay the change in textarea's height to a reasonable amount. Example via CSS:

textarea {
  /* Can only transition to/from computable <length>s, meaning:
   * Must be set to a computable <length-percentage>.
   */
  height: 2lh;
  
  transition-delay: 1s;
  transition-property: height;
}
textarea:focus {
  height: 5rem;
  
  /* When :focus, don't delay:
   * This applies the new height immediately.
   */
  transition-delay: 0s;
}

<textarea></textarea>
<button onclick="alert('ok');">test</button>