
I dug in more to see why clicking one button triggered another button's click handler, and it turns out that example is misusing IDs on the options - each toggle uses the same true/false option IDs which are provided to the DOM elements, creating conflicting IDs. Effectively:
toolbarVisibility prop
<label for="true" onClick=...>Boolean</label><input type="radio" id="true" />
<label for="false" onClick=...>Object</label><input type="radio" id="false" />
Show toolbar
<label for="true" onClick=...>True</label><input type="radio" id="true" />
<label for="false" onClick=...>False</label><input type="radio" id="false" />
so when Show toolbar's False label is clicked, its onClick fires and then the browser follows its for attribute to the first element on the page with that ID, which is the input for toolbarVisibility prop's False. This is a mistake in the example, and we might be missing relevant documentation for EuiButtonGroup.
Originally posted by @chandlerprall in #4610 (comment)
I dug in more to see why clicking one button triggered another button's click handler, and it turns out that example is misusing IDs on the options - each toggle uses the same true/false option IDs which are provided to the DOM elements, creating conflicting IDs. Effectively:
so when Show toolbar's False label is clicked, its onClick fires and then the browser follows its
forattribute to the first element on the page with that ID, which is the input for toolbarVisibility prop's False. This is a mistake in the example, and we might be missing relevant documentation for EuiButtonGroup.Originally posted by @chandlerprall in #4610 (comment)