As reported in https://github.com/phetsims/beers-law-lab/issues/317, the pointer areas for a horizontal AquaRadioButtonGroup are currently incorrect. For example, we have this group with spacing: 60 (see SoluteFormRadioButtonGroup.ts):
The relevant code in AquaRadioButtonGroup.ts is:
// set pointer areas - update them when the localBounds change
radioButton.localBoundsProperty.link( localBounds => {
if ( options.orientation === 'vertical' ) {
radioButton.mouseArea = localBounds.dilatedXY( options.mouseAreaXDilation, options.spacing / 2 );
radioButton.touchArea = localBounds.dilatedXY( options.touchAreaXDilation, options.spacing / 2 );
}
else {
radioButton.mouseArea = localBounds.dilatedXY( options.spacing / 2, options.mouseAreaYDilation );
radioButton.touchArea = localBounds.dilatedXY( options.spacing / 2, options.touchAreaYDilation );
}
} );
For vertial orientation, it's OK to fill the vertical space between buttons with pointer area by including options.spacing in the computation. But for horizontal orientation, that's not OK, and results in exactly this kind of problem.
The solution is to rewrite the else block above like this:
As reported in https://github.com/phetsims/beers-law-lab/issues/317, the pointer areas for a horizontal AquaRadioButtonGroup are currently incorrect. For example, we have this group with
spacing: 60
(see SoluteFormRadioButtonGroup.ts):The relevant code in AquaRadioButtonGroup.ts is:
For vertial orientation, it's OK to fill the vertical space between buttons with pointer area by including
options.spacing
in the computation. But for horizontal orientation, that's not OK, and results in exactly this kind of problem.The solution is to rewrite the
else
block above like this:... which in our example will result in: