stop auto-closing the popup when the popup is active (jquery/javascript)

Question

I have written a code where the popup closes automatically, but the problem is the popup shouldn't close while the user is selecting/typing something from the popup. if the popup is idle for 10sec/15sec then it should close automatically. Any help is appreciated, thanks in advance.

    $(document).ready(function(){
          $(".popup_data").hide(); 
          $('#search').click(function(){   
           if ($(".popup_data").css("display") == "none") {             
               $(".popup_data").show();                  
            } else {                
               $(".popup_data").hide();          
            }
          });  
        });
        $(document).ready(function(){
          $("#search").click(function() {    
            if($('.popup_data ').is(':visible')){
            var timeout = window.setTimeout(function(){
                $('.popup_data ').stop().fadeOut('medium');           
            }, 5000);
            }
          });
})

.popup_data{border: 1px solid #C6CFD6; width:320px; height:120px; } 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="search">                       
        <button>&nbsp;popup</button>                
        </div> 
        <div class="popup_data " style="display: none;" >

      <div style="display:inline-flex; margin-top:20px;">
                 <label>test1</label>
                 <div>
                    <select >
                       <option value="">&nbsp;</option>
                       <option value="1">one two</option>
                       <option value="2">two</option>
                       
                    </select>
                 </div>
              </div>
     <div style="display:inline-flex;margin-top:20px;"> 
                 <label>test2</label>
                 <div>
                    <select >
                       <option value="">&nbsp;</option>
                       <option  value="1">one </option>
                       <option value="2">two</option>                                       
                    </select>
                 </div>
              </div>
       
     
        </div>

Answer 1

You can use the bind function to bind what ever event you want to stop hiding the modal I've added change and keyup events

$(document).ready(function(){

          var idle=false;
          
          var timeout = null;

          $(document).bind("change keyup click", function() {
              clearTimeout(timeout);

              timeout = setTimeout(function() {
                  if($('.popup_data ').is(':visible')){
                     $('.popup_data ').stop().fadeOut('medium');  
                  }
              }, 5000);
          });

          $(".popup_data").hide(); 
          
          $('#search').click(function(){   
            if ($(".popup_data").css("display") == "none") {             
               $(".popup_data").show();                  
            } else {                
               $(".popup_data").hide();          
            }
        });  
   
})

.popup_data{border: 1px solid #C6CFD6; width:320px; height:120px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="search">                       
        <button>&nbsp;popup</button>                
        </div> 
        <div class="popup_data " style="display: none;" >

      <div style="display:inline-flex; margin-top:20px;">
                 <label>test1</label>
                 <div>
                    <select >
                       <option value="">&nbsp;</option>
                       <option value="1">one two</option>
                       <option value="2">two</option>
                       
                    </select>
                 </div>
              </div>
     <div style="display:inline-flex;margin-top:20px;"> 
                 <label>test2</label>
                 <div>
                    <select >
                       <option value="">&nbsp;</option>
                       <option  value="1">one </option>
                       <option value="2">two</option>                                       
                    </select>
                 </div>
              </div>
    </div>

Answer 2

Add 2 event listeners. First one will destroy timer while focus on selects inside popup. Second one will restart timer after any select fires blur event.

    $(document).ready(function(){
          $(".popup_data").hide(); 
          $('#search').click(function(){   
           if ($(".popup_data").css("display") == "none") {             
               $(".popup_data").show();                  
            } else {                
               $(".popup_data").hide();          
            }
          });  
        });
        $(document).ready(function(){
          var timeout;
          $("#search").click(function() {    
            if($('.popup_data ').is(':visible')){
            timeout = startTimer();
            }
          $('body').on('focus', 'select', () => {
           window.clearTimeout(timeout);
          });
          $('body').on('blur', 'select', () => {
           window.clearTimeout(timeout); 
           timeout = startTimer();});
          });
});

const startTimer = () => (
 window.setTimeout(function(){
 $('.popup_data ').stop().fadeOut('medium');           
 }, 2000)
);

.popup_data{border: 1px solid #C6CFD6; width:320px; height:120px; } 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="search">                       
        <button>&nbsp;popup</button>                
        </div> 
        <div class="popup_data " style="display: none;" >

      <div style="display:inline-flex; margin-top:20px;">
                 <label>test1</label>
                 <div>
                    <select >
                       <option value="">&nbsp;</option>
                       <option value="1">one two</option>
                       <option value="2">two</option>
                       
                    </select>
                 </div>
              </div>
     <div style="display:inline-flex;margin-top:20px;"> 
                 <label>test2</label>
                 <div>
                    <select >
                       <option value="">&nbsp;</option>
                       <option  value="1">one </option>
                       <option value="2">two</option>                                       
                    </select>
                 </div>
              </div>
       
     
        </div>