How to prevent dropdown from loosing focus when clicking inside of it

Question

I have a fiddle that has a dropdown list that displays a tabbed form.

Note: You cannot see the tabs, but if you hover over the top you will see there are 4 tabs.

The idea is that the user can select a tab, and then fill out the form.

Currently if you click on a tab, it will loose focus and the dropdown disappears. If you click on 'some title' link again, you will notice the tab you selected is correctly selected but it lost focus.

<div class="dropdown">
        <a class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Some title</a>

        <div class="dropdown-menu dropdown-menu-right subscribe-box" aria-labelledby="dropdownMenu1">

          <ul class="nav nav-pills" id="myTab">
            <li class="active"><a href="#" data-target="#mail" data-toggle="tab"><i class="fa fa-envelope-o"></i></a></li>
            <li><a href="#" data-target="#twitter" data-toggle="tab"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" data-target="#sms" data-toggle="tab"><i class="fa fa-commenting"></i></a></li>
            <li><a href="#" data-target="#rss" data-toggle="tab"><i class="fa fa-rss"></i></a></li>
          </ul>

          <div class="tab-content">
            <div class="tab-pane active" id="mail">
              <p>Enter your email address.</p>
              <div class="row">
                <div class="col-sm-8 input-box">
                  <input placeholder="name@email.com" type="text">
                </div>
                <div class="col-sm-4 input-button">
                  <a href="" class="btn">Subscribe</a>
                </div>
              </div>
            </div>

            <div class="tab-pane" id="twitter">
              <p>Enter your twitter username</p>
              <input placeholder="@username" type="text">
            </div>

            <div class="tab-pane" id="sms">
              <p>phone</p>
              <input placeholder="555-123-4567" type="text">
            </div>

            <div class="tab-pane" id="rss">
              <p>rss link</p>
            </div>
          </div>

        </div>
      </div>

    </div>

https://jsfiddle.net/zr6q6bsm/

What do I need to modify so that when you select anything inside of the dropdown, it doesn't lose focus.

Answer 1

I think this can help you:

Add this to your page

 <script>
   $(document).ready(function(){
      $('#myTab li a').click(function(){
        setTimeout(function(){
          $('.dropdown-menu').show();
        }, 0);
     })
   });
 </script>