Semantic-ui: animated button restore state on click

[rickmed]

this examples: http://semantic-ui.com/elements/button.html#animated

When I click a button, the hidden content stays showed. How can I can restore the visible content on click?

[jlukic]

Animated button show animation on focus, generally using <button> preserve focus on click as an accessibility feature.

If you want it to not preserve focus you can use <div class="ui button">Click</div>

[rickmed]

@jlukic thanks for the response!

using div instead of button does not work (still preserves focus). Actually, the examples in the link above are all using div and all preserve focus. How can I overwrite the animated button to return back to the visible state after clicking?

[12s]

replacing button tags to div tags broke the focus as described for me

[icodebuster]

@jlukic
I have tried changing the <button> tag to <div> still it's not working. Any other workaround.

[evanandrewrose]

If you're handling the events to the button manually, which is likely if you're trying to prevent the animation from being sticky when you hit the button, you can prevent the browser from allowing focus to be applied to the button by eating the event that happens on 'mousedown'. For jQuery it's something like:

$('.no-sticky-animation').on('mousedown', function(event) {
  event.preventDefault();
});

If you're using the semantic/react bindings, you can just do:

<Button
  animated="vertical"
  onMouseDown={e => e.preventDefault()}
>

[I-NOZex]

onMouseDown={e => e.preventDefault()}

Vue.js:
v-on:mousedown.prevent="$event.preventDefault()"