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:

Click on feedback
Click on cancel button on the popup
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/

score 1 · Accepted Answer · answered Sep 09 '19 at 09:35

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 () {
                    }
                }
            });
});

This is a rather hacky way of doing this, which is unnecessary when the `tippy` library includes a method to do it properly. — Rory McCrossan, Sep 09 '19 at 10:23

Rory McCrossan · Answer 2 · 2019-09-09T10:19:42.323

The issue is because the default triggers for tippy are click and focus. Hence when the modal is dismissed the tooltip is shown again when focus returns to the element.

To fix this set the trigger property to 'click mouseenter'. The removal of focus will fix your issue. Adding mouseenter means that the tooltip will be shown on hover, but can be removed if you don't need that behaviour.

jQuery(function($) {
  tippy('#feedback', {
    trigger: 'click mouseenter', // add this property
    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() {
            // do something...
          }
        },
        cancel: function() {
          // do something...
        }
      }
    });
  });
});

#feedback {
  outline: 0;
}

<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>

Also note that I placed all the jQuery logic in a single document.ready handler; you don't need multiple.

Thank you Rory. This works but this still puts an outline on the span on cancel button event. $(this).blur(); before opening confirm popup works correct. — Akshay, Sep 09 '19 at 10:18
The outline comes from Bootstrap. If you don't want it you can remove it in CSS. I've updated the answer to show you how — Rory McCrossan, Sep 09 '19 at 10:20
Ah ok. I have use of bootstrap in my actual code. So, cannot remove it. — Akshay, Sep 09 '19 at 10:21
No, I'm not saying you need to remove Bootstrap, just add the style to the `#feedback` element as I did in my answer — Rory McCrossan, Sep 09 '19 at 10:22
Got it. Anyway thanks a lot for your help. Never knew there is a trigger property available in tippy — Akshay, Sep 09 '19 at 10:24
Glad to help, but note that the method in the other answer is a little hacky and may not work in all browsers. — Rory McCrossan, Sep 09 '19 at 10:27

Remove focus from the span element

2 Answers2