Mobile only: Button is not pressable if I change color from undefined to value and back at onPointerUp event #374
Description
Describe the issue
Our component manages button active style internally like on example below.
When onPointerUp callback is fired the style with the color property is removed from button element.
It somehow result in onClick callback not working.
Screen.Recording.2025-08-18.at.15.06.48.mov
Expected behavior
onClick works as expected despite the change of styles
Steps to reproduce
RSD 0.0.47, the issue reproduces only on mobile.
const UnstyledButton = () => {
const [isActive, setActive] = React.useState(false);
return (
<h.button
style={isActive && styles.active}
type="button"
role="button"
onClick={() => alert('!')}
onPointerDown={() => setActive(true)}
onPointerUp={() => setActive(false)}
onPointerOut={() => setActive(false)}
onPointerCancel={() => setActive(false)}
onKeyDown={({ key }) => {
if (key === "Enter" || key === " " || key === "Space") {
setActive(true);
}
}}
onKeyUp={() => setActive(false)}
{...props}
>
Test Button
</h.button>
);
};
UnstyledButton.displayName = "UnstyledButton";
const styles = css.create({
active: {
color: '#0f0',
},
});