I came across this weird behavior difference between Chrome and Safari. If there is label with input and button inside of it, clicking the button will make input get focus in Safari, but in Chrome it won't.

I figured out that adding e.preventDefault() to button click handler makes Safari behave same as Chrome.

Here is the minimal code example:

<label>
  <input />
  <button>add</button>
</label>

Is this a bug in Chrome/Safari or some documented "feature"? What's the "correct" way this html should behave?

1 Answers

1
Charu Maheshwari On

Don't know why your button is sitting inside the label. Input and button both are actionable (on which some actions could be done) elements. By default actionable elements gets focus in browser. So, you should keep both elements separate. labels could be wrapped or could not be wrapped with input, refer "Is it better to wrap the label tag around a form item or use the "for" attribute in HTML? for details.

<body>

  <label>
  <input />
</label>
  <button>add</button>
</body>