Button hasIconOnly bug with Modal

[NotEntirelySure]

There is a bug when using the following Carbon components: Button, DataTable, and Modal. Loading a Button that utilizes the hasIconOnly property into the DataTable seems to be what creates the bug. When the Modal is opened in this configuration, the Button in the DataTable row that utilizes the hasIconOnly is still clickable and has a higher z index than the Modal and the Modal overlay. If the still accessible Button opens a different Modal with its onClick event, opening and then closing the other Modal, will cause the Buttons with the hasIconOnly property to then operate as expected (becoming inaccessible and having a lower z index than the Modal). When the Button is changed to hasIconOnly={false}, the Button then responds as expected (becomes inaccessible and has a lower z index than the Modal). Another thing that causes the Buttons to operate as expected is to change the DataTable property of stickyHeader={false} to stickyHeader={true}. For some reason, when the DataTable is set to having a sticky header, the Buttons loaded into the DataTable rows operate as expected when the Modal opens.

[NotEntirelySure]

Forgot to mention: this bug occurs when using Carbon version 11. It does not occur with Carbon version 10.

[abbeyhrt]

Hey @NotEntirelySure! Thanks for reporting this bug! This is definitely something we will look into! Would you mind providing more information about the bug you're running into? Like what version of Carbon are you using?

[doggodoge]

Hi folks, I've come across this issue too. It looks like the tooltip on a button with icon only, or IconButton, has a z-index of 9000. This might be the cause of the issue.

Just a bit more information, we are migrating our project from Carbon v10 -> v11. When we open a Modal, every IconButton that we've moved over will draw over the Modal. Opening dev tools I see there's a z-index: 9000 css property applied to all these buttons. When I disable this property, it fixes the issue.

Here's a screenshot of what that looks like:

And when I disable this css rule:

We get this:

Hope this helps 🙂

[tw15egan]

Confirmed, Modal styles are leaking out

[NotEntirelySure]

Hey @NotEntirelySure! Thanks for reporting this bug! This is definitely something we will look into! Would you mind providing more information about the bug you're running into? Like what version of Carbon are you using?

@abbeyhrt The version of Carbon I'm using is v11. I was migrating my project from v10 when I noticed this bug with my modals.