Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EuiBadge iconOnClick makes badge text clickable #3390

Closed
jpcarey opened this issue Apr 28, 2020 · 1 comment · Fixed by #3392
Closed

EuiBadge iconOnClick makes badge text clickable #3390

jpcarey opened this issue Apr 28, 2020 · 1 comment · Fixed by #3392

Comments

@jpcarey
Copy link

jpcarey commented Apr 28, 2020

using EuiBadge, if I set iconOnClick, the entire badge becomes a clickable button (where only the icon binds to the iconOnClick). This is problematic for using with things like EuiDraggable, since there is pretty much no where to click and drag for the badge.

<EuiBadge
  iconType="cross"
  iconOnClickAriaLabel="something"
  iconOnClick={() => alert('hello')}
>
Example Badge
</EuiBadge>

image
^ notice the underlined "Example Badge", as it is treated as a clickable link - that does not do anything.

@snide
Copy link
Contributor

snide commented Apr 28, 2020

When diagnosing this, I noticed our docs example renders the inner text as a button when only the icon should be a button. Likely we just need to shift this to a span if no onClick is present. I know this is how it used to work, so likely we had a small regression recently.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants