Scratch-blocks: "Create variable" button click is only on the button text, not the button rect

[rachel-fenichel]

Expected Behavior

Clicking anywhere on the "create variable" button makes the modal appear.

Actual Behavior

Only clicking on the text makes the modal appear.

Steps to Reproduce

Open the vertical playground
Go to the "Data" category
Click on the background of the "create variable" button

Operating System and Browser

Ubuntu, Chrome

[thisandagain]

Can't repro on MacOS, Chrome (latest) but we should try to repro on Ubuntu.

[paulkaplan]

There is some funky behavior on that button. Sometimes clicking the whole button works, but sometimes it doesn't. Here is a gif of what I saw. Note that cursor style correlates directly with clickability, so any time you see the hand it was possible to click.

[rachel-fenichel]

@paulkaplan that matches what I was seeing. It seems like once you hit the text it becomes clickable, and then stays clickable to the edge of the button, but I'm not sure.

I quickly checked the Blockly playground and couldn't repro, but that button is styled pretty differently.

[prail]

@paulkaplan I'm seeing this behavior as well.

[msintov]

We fixed this issue internally (at least for Android) by adding a transparent background to the flyout label attributes in the call to create the background rectangle in Blockly.FlyoutButton.prototype.createDom.

[AmazingMech2418]

@rachel-fenichel I can hover over the text and then click anywhere in the box, but it seems like the event listener is only attached to the text with a mouseover event with a mouseout on the rectangle.

[ericrosenbaum]

On touch on chrome OS this problem makes the buttons very difficult to click (usually takes six or seven tries).