title: Focus on input field when popup shown(bootstrap popover)
body: <p>I have html body with this button:</p>
  
  <pre><code>&lt;div tabindex="0" class="image-copy-to-clipboard image-copy-to-clipboard-icon" role="button" data-placement="bottom" data-toggle="popover" data-trigger="focus" data-container="body"&gt;
      &lt;div class="head hide"&gt;Press Ctrl+C to copy user info&lt;/div&gt;
      &lt;div class="content hide"&gt;
          &lt;input id="userInfo" type="text" placeholder="" value="#{{user.Id}} : {{user.Name}}" autofocus="autofocus" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this script to make it works:</p>
  
  <pre><code>$('[data-toggle="popover"]').popover({
      html: true,
      title: function() {
          return $(this).parent().find('.head').html();
      },
      content: function() {
          return $(this).parent().find('.content').html();
      }
  });
  
  $('#userInfo').focus(function (event) {
      var self = $(this);
      setTimeout(function() {
           self.select();
      }, 100);
  });
  
  $(document).on('click', function(event) {
      if (event.target.nodeName == 'HTML') {
          $('.popover.fade').hide().remove();
      }
  });
  </code></pre>
  
  <p>When popup window shown I need to focus on input field and all text must be selected. I tried a lot of issues but nothing works normally. Please help me solve this problem. </p>
  
  <p><a href="https://jsfiddle.net/HUSTLIN/b991st3m/1/" rel="nofollow">JSFiddle</a></p>