Skip to content

[EuiDataGrid] Styling example uses invalid DOM #4645

@chandlerprall

Description

@chandlerprall

https://user-images.githubusercontent.com/313125/110012062-59bb5d00-7cdd-11eb-9a6f-36f630e018e9.gif

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationIssues or PRs that only affect documentation - will not need changelog entriesgood first issue

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions