-
-
Notifications
You must be signed in to change notification settings - Fork 331
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Shape] Focussed Checkbox inside shape breaks animation #529
[Shape] Focussed Checkbox inside shape breaks animation #529
Conversation
…to blur. otherwise animation is broken
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
I had to adjust the delay for mobile, see latest commit and here |
What do you guys think? Should I remove the mobile recognition again and just stick with 150ms all the time, also on desktop then? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
Removed mobile check and just increased to 150ms |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
Description
When a shape had a focussed input inside, any animation was broken.
Previously, you had to click outside of the shape to blur the input to make the animation work again.
Although in the example below, the checkbox indeed gets blurred right before the button to animate the shape is clicked, it seems the browser engine still gets confused and does not recognize the change early enough.
This PR now delays the animation for a short time in case of input being part of the the shape, so the blurred checkout is also recognized by the browser engine at animation time
Testcase
Check/uncheck the checkbox. Then quickly (means don't hold the mousebutton for too long) click the Button to trigger the animation
Broken
https://jsfiddle.net/o5tqeuha/
Fixed
https://jsfiddle.net/xr2jvnof/
Screenshot
Closes
Semantic-Org/Semantic-UI#6583