Как остановить раскрывающийся список от фокуса? - PullRequest
Новая
       36

Как остановить раскрывающийся список от фокуса?

0 голосов
/ 23 января 2020

Предыстория: на момент написания, Fomanti c -UI - это ветвь разработки в реальном времени Semanti c -UI, которая однажды будет внедрена в Semanti c -UI и в то же время является Фактически поддерживаемый род Semanti c -UI.

Проблема: если первый фокусируемый объект на странице представляет собой раскрывающийся список, то при открытии страницы раскрывающийся список открывается, как при нажатии.

Примечания У меня это впервые произошло в модальной ситуации, и я был озадачен этим, думая, что это проблема именно модальной, но с тех пор у меня было то же самое на простой странице. Я использовал модальный случай в фрагменте ниже, чтобы проиллюстрировать, потому что средство просмотра фрагмента SO не вызывает поведение, которое вы получаете на простой странице. Другой пользователь поднял это как проблему на git ПУ, и команда поддержки указала ответ, которым я делюсь здесь через этот вопрос с автоответчиком. 

$('.ui.dropdown')
  .dropdown({

  });

$('#b1').on('click', function(e) {

  $('#m1').modal('show')


})
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>

<body>
  <p>Click the 'show modal' button to open a modal. Note the language dropdown opens immediately.
  </p>

  <p>
    <button id='b1'>Show the modal</button>
  </p>

  <div id='m1' class="ui modal">
    <div class="header">Header</div>

    <div class="content">
      <div class='container'>

        <div class="ui floating dropdown labeled search icon button">
          <i class="world icon"></i>
          <span class="text">Select Language</span>
          <div class="menu">
            <div class="item">Arabic</div>
            <div class="item">Chinese</div>
            <div class="item">Danish</div>
            <div class="item">Dutch</div>
            <div class="item">English</div>
            <div class="item">French</div>
            <div class="item">German</div>
            <div class="item">Greek</div>
            <div class="item">Hungarian</div>
            <div class="item">Italian</div>
            <div class="item">Japanese</div>
            <div class="item">Korean</div>
            <div class="item">Lithuanian</div>
            <div class="item">Persian</div>
            <div class="item">Polish</div>
            <div class="item">Portuguese</div>
            <div class="item">Russian</div>
            <div class="item">Spanish</div>
            <div class="item">Swedish</div>
            <div class="item">Turkish</div>
            <div class="item">Vietnamese</div>
          </div>
        </div>
      </div>

      <p>
        Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
        incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
        voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>

    </div>
    <div class="actions">
      <div class="ui approve button">Approve</div>
      <div class="ui button">Neutral</div>
      <div class="ui cancel button">Cancel</div>
    </div>
  </div>
</body>

1 Ответ

0 голосов
/ 23 января 2020

Ответом является настройка при раскрывающемся вызове. 

$('.ui.dropdown').dropdown({
  showOnFocus: false
});

Практически все, что говорится на жестяной банке - если для showOnFocus задано значение True (настройка по умолчанию), раскрывающийся список открывается при получении фокуса. , Если раскрывающийся список является первым фокусируемым объектом на странице, то он немедленно откроется. Чтобы избежать этого, активно установите для showOnFocus значение False, как в фрагменте, и раскрывающийся список будет скрывать его содержимое до тех пор, пока пользователь не инициирует открытый процесс. 

$('.ui.dropdown')
  .dropdown({
    showOnFocus: false
  });

$('#b1').on('click', function(e) {

  $('#m1').modal('show')


})
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>

<body>
  <p>Click the 'show modal' button to open a modal. Note the language dropdown opens immediately.
  </p>

  <p>
    <button id='b1'>Show the modal</button>
  </p>

  <div id='m1' class="ui modal">
    <div class="header">Header</div>

    <div class="content">
      <div class='container'>

        <div class="ui floating dropdown labeled search icon button">
          <i class="world icon"></i>
          <span class="text">Select Language</span>
          <div class="menu">
            <div class="item">Arabic</div>
            <div class="item">Chinese</div>
            <div class="item">Danish</div>
            <div class="item">Dutch</div>
            <div class="item">English</div>
            <div class="item">French</div>
            <div class="item">German</div>
            <div class="item">Greek</div>
            <div class="item">Hungarian</div>
            <div class="item">Italian</div>
            <div class="item">Japanese</div>
            <div class="item">Korean</div>
            <div class="item">Lithuanian</div>
            <div class="item">Persian</div>
            <div class="item">Polish</div>
            <div class="item">Portuguese</div>
            <div class="item">Russian</div>
            <div class="item">Spanish</div>
            <div class="item">Swedish</div>
            <div class="item">Turkish</div>
            <div class="item">Vietnamese</div>
          </div>
        </div>
      </div>

      <p>
        Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
        incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
        voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>

    </div>
    <div class="actions">
      <div class="ui approve button">Approve</div>
      <div class="ui button">Neutral</div>
      <div class="ui cancel button">Cancel</div>
    </div>
  </div>
</body>
...