Семантический интерфейс, удалите автофук в раскрывающемся списке

Я использую раскрывающийся список семантического пользовательского интерфейса в модальном окне, всякий раз, когда модальный открывается, раскрывающийся список в нем открывается автоматически.

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>

Я пробовал autoFocus: false, но он не работает.

javascript jquery html css semantic-ui

15.01.2019 10:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 239

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам необходимо поставить autoFocus: false перед 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/

@AbhishekPandey рад помочь :-)

— 15.01.2019 11:00

15.01.2019 10:56

Вы ищете свойство 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/

15.01.2019 11:14