how to prevent iOS safari from focusing new element?

user_14460981 0
Viewed 198

When I remove a button on click and place new button at the same location, safari on iphone sets the focus state on the new button. This results in a focused button while the user hasn't clicked the new button. How can I prevent iOS safari from focusing my new element?

This behavior does not occur on my android device with chrome. The only answers I could find about iOS safari are where the focused state is not removed after click. I have tried preventDefault, stopPropagation but it is not working.

Fiddle similar to my situation. This does a direct replace while my code replaces after successfully receiving content from get call.

<div class="container">
    <a class="btn btn-info">first button</a>
</div>

<script>
$(".btn").click(function () {
    $(this).remove();
    $('.container').append('<a class="btn btn-info">second button</a>')
});
</script>

https://jsfiddle.net/puymn180/2/

Fix will probably be difficult but workaround would be acceptable.

bootstrap-4 safari css javascript ios
1 Answers

I found a workaround for this issue by adding the button asynchronously.

setTimeout(function () {
    $('.container').append('<a class="btn btn-info">second button</a>');
}, 0);

This does not solve the problem where a button keeps focus without replacing the button' element. (where most people are looking for)

user_144609810
Related