Remove focus from the span element

Question

I have below jsfiddle and I have tried few ways mentioned in this SO question but I am unable to remove the focus from "feedback" span after clicking on jquery confirm cancel button.

Steps:

1. Click on feedback
2. Click on cancel button on the popup
3. Feedback span again shows tippy js tip box.

I have tried jquery blur and document.activeElement.blur() but its not working.

$(document).ready(function() {
  tippy('#feedback', {
    placement: 'right',
    arrow: true,
    content: "Share your feedback."
  });
});

$('#feedback').click(function() {
  $.confirm({
    title: 'Feedback',
    useBootstrap: false,
    content: '' +
      '<form action="" class="formName">' +
      '<div class="form-group">' +
      '<input type="text" class="name form-control" required />' +
      '</div>' +
      '</form>',
    buttons: {
      formSubmit: {
        text: 'Send Feedback',
        btnClass: 'btn-blue',
        action: function() {

        }
      },
      cancel: function() {
        // $("#feedback").blur();
        // document.activeElement.blur();
      }
    }
  });
});

<script type="text/javascript" src="https://unpkg.com/popper.js@1"></script>
<script type="text/javascript" src="https://unpkg.com/tippy.js@4"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/craftpip/jquery-confirm/master/css/jquery-confirm.css">
<script type="text/javascript" src="https://rawgit.com/craftpip/jquery-confirm/master/js/jquery-confirm.js"></script>
<span id="feedback" style="cursor:pointer;">
  feedback
</span>

https://jsfiddle.net/sw8gpuoa/1/

Answer 1

Hope this helps you. I unfocus when click event occurs and it seem work.

$('#feedback').click(function() {
    $(this).blur(); // unfocus when click event occur
    $.confirm({
                title: 'Feedback',
                useBootstrap: false,
                content: '' +
                    '<form action="" class="formName">' +
                    '<div class="form-group">' +
                    '<input type="text" class="name form-control" required />' +
                    '</div>' +
                    '</form>',
                buttons: {
                    formSubmit: {
                        text: 'Send Feedback',
                        btnClass: 'btn-blue',
                        action: function () {

                        }
                    },
                    cancel: function () {
                    }
                }
            });
});