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

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

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>
Tags:

2

Answers


  1. 0

    the problem is that your button moves when you onfocus the textarea, that’s why the button wont be clicked.

    to fix that use the code below:

    function ok() {
  document.getElementById("txta").blur() 
  alert("ok")
}
    #txta-container {
  min-height: 6rem;
}

textarea:focus {
  height: 5rem;
}
    <div id="txta-container">
  <textarea id="txta" class="dx-texteditor-input" spellcheck="true" tabindex="0" role="textbox" aria-multiline="true"></textarea>
</div>
<button id="btn" onclick="ok()"> test </button>
    Login or Signup to reply.
  2. 0

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

Back To Top
Search