Конфликт между событием клика и настройкой фокуса?

Question

Я пытаюсь выполнить запрос доступности, чтобы установить фокус на модальный, когда он открыт. В событии on click для ссылки, которая открывает модальную, я пытаюсь установить фокус на элемент ссылки в модальном (модальный существует, когда вся страница загружается, она просто не видна, а также элемент ссылки в модальном значение href). Однако я не могу изменить фокус. Я могу сделать это в событии keydown документа, что заставляет меня думать, что есть определенный конфликт с кликом. Существует ли какой-либо известный конфликт с установкой фокуса от того, что только что было нажато? Есть ли обходной путь?

Ссылка на главной странице:

<li id="country-selector" class="country-selector"> 
    <a alt="Country Selector" href="#"><img src="../assets/images/countries/nz.png" alt="New Zealand flag"> New Zealand</a 
</li> 

Ссылка на модальный (с помощью рулей, не уверен, если это уместно, но в том числе и в любом случае):

<li class="cs-region {{#if @first}}active{{/if}}"> 
    <a href="#cs-{{slug}}" class="cs-tabs__link" {{#if @first}}id="cs-countries__first-focus" {{/if}}>{{region}}</a> 
</li> 

Который выходит как:

<li class="cs-region active"> 
    <a href="#cs-europe" class="cs-tabs__link" id="cs-countries__first-focus">Europe</a> 
</li> 

для первой ссылки.

Вот мой JS:

$('#country-selector').on('click', function(e) { 
    //Accessibility; make the modal keyboard navigable 
    var modalParent = document.getElementById('cs-countries'); 

    if ($.contains(modalParent, document.activeElement) !== true) { 
     //tabbed outside modal, so reset focus 
     console.log("activeElement is outside modal: ", document.activeElement); 
     document.getElementById('cs-countries__first-focus').focus(); //native js method 
     $('#cs-countries__first-focus').focus(); //jquery method 
     console.log("after set: ", document.activeElement); 
    } else { 
     console.log("activeElement is inside modal: ", document.activeElement); 
    } 
}); 

Ни JQuery или нативные методы JS не работают, хотя я использовал их в другом месте на проекте по аналогичному вопросу, но только не на постоянной событие щелчка. После перехода через остальные элементы главной страницы можно перейти к модальному моменту, и я могу настроить фокус при табуляции, но мне нужно, чтобы фокус начинался с элемента внутри модального.

Answer 1

Я был в состоянии решить эту проблему с помощью SetTimeout (и разбивая на обед):

$('#country-selector').on('click', function(e) { 
    //Accessibility; make the modal keyboard navigable 
    var modalParent = document.getElementById('cs-countries'); 

    if ($.contains(modalParent, document.activeElement) !== true) { 
     //tabbed outside modal, so reset focus 
     console.log("activeElement is outside modal: ", document.activeElement); 
     setTimeout(function() { 
       console.log("in set timeout"); 
       $('#cs-countries__first-focus').focus(); 
       console.log("afterset: ", document.activeElement); 
      }, 1); 
    } else { 
     console.log("activeElement is inside modal: ", document.activeElement); 
    } 
});