语义UI，在下拉菜单中删除自动对焦

Question

I'm using semantic ui dropdown within a modal box, whenever the modal is being opened, the dropdown in it opens automatically.

 function showmodal() { $('.ui.modal').modal('show'); } if ($('.ui.dropdown').length) { $('.ui.dropdown').dropdown({ useLabels: false, forceSelection: false, autoFocus: false }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> <div class="ui modal"> <i class="close icon"></i> <div class="header"> Profile Picture </div> <div class="content"> <form action="" class="ui form"> <div class="field mandatory"> <label>Gender</label> <select class="ui dropdown"> <option value="">Gender</option> <option value="1">Male</option> <option value="0">Female</option> </select> </div> </form> </div> <div class="actions"> <div class="ui black deny button"> Nope </div> <div class="ui positive right labeled icon button"> Yep, that's me <i class="checkmark icon"></i> </div> </div> </div> <button class="ui button" onclick="showmodal()">Click to Open Modal</button> 

I have tried autoFocus: false , but it's not working.

Answer 1

You need to put the autoFocus: false before the modal('show') :

 function showmodal() { $('.ui.modal').modal({ autofocus: false, }).modal('show'); } if ($('.ui.dropdown').length) { $('.ui.dropdown').dropdown({ useLabels: false, forceSelection: false }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> <div class="ui modal"> <i class="close icon"></i> <div class="header"> Profile Picture </div> <div class="content"> <form action="" class="ui form"> <div class="field mandatory"> <label>Gender</label> <select class="ui dropdown"> <option value="">Gender</option> <option value="1">Male</option> <option value="0">Female</option> </select> </div> </form> </div> <div class="actions"> <div class="ui black deny button"> Nope </div> <div class="ui positive right labeled icon button"> Yep, that's me <i class="checkmark icon"></i> </div> </div> </div> <button class="ui button" onclick="showmodal()">Click to Open Modal</button> 

JSFiddle : https://jsfiddle.net/wvpqf9t2/

Answer 2

The property you are looking for is showOnFocus: False

$(function(){
    $('.ui.button').click(function(){ showmodal() })
  function showmodal() {
    $('.ui.modal').modal('show');
  }
  if ($('.ui.dropdown').length) {
    $('.ui.dropdown').dropdown({
      showOnFocus: false
    });
  }
})

https://jsfiddle.net/q48s3voj/1/