Button Inside Label Not Triggering Input

When you nest a button inside a label tag, with the latter targeting an input, clicking the button will not trigger the input. Take this checkbox as an example:

<input type='checkbox' id='potato' />

<label for='potato'>
  <button>Potato</button>
</label>

Clicking the button will not select the checkbox. What can be done? As far as I know, there are 2 possibilities:

• Switch the button for a div that is styled like one, or
• Apply the following style to the nested button:

label > button {
  pointer-events: none;
}

A great explanation on the possible cause of this issue can be found on Stack Overflow.