Button focus persists after clicking it and retains an unfinished animated state

Summary

Very strange button behavior. The animation is not completed until you click elsewhere. Which suggests buttons implicitly have “state”.

Expected Behavior

I expect for buttons to never surprise me, maybe an animation on click or a color change on hover. Once you start trying to reinvent the wheel with surprising animations and finite state machines, buttons become too surprising and frustrating to use.

⚠️ Clicking one button should not animate another button 🚨

Actual Behavior

Total confusion about something that is supposed to be dead simple.

URL, screen shot, or Codepen exhibiting the issue

Steps to Reproduce

            <Button
              hoverIndicator={false}
              label={'A'}
              plain={true}
              focusIndicator={false}/>
            <Button
              color={'dark-1'}
              plain={false}
              primary
              focusIndicator={false}>
              B
            </Button>

• Click Sign up.
• Observe the awkward behavior that occurs: theres two aimations hovering and clicking.
• Clicking one button, animates the other

Your Environment

• Grommet version: 2.10.0
• Browser Name and version: Chrome 79.0.3945.130
• Operating System and version (desktop or mobile): macOS

[felisio]

Hey @jcfilben thanks for the feedback, I’ll open a new issue for that, also I’ll take a look into the contributing guide to see how can I help with that issue. 😎

[jcfilben]

Hi @felisio I think a new issue could be created for this since the title and description for this current issue is really a separate issue that has already been solved. Would you be willing to file a new issue for this? Also if you are interested you can take it a step further and file a pull request for this. For more info checkout the contributing guide.