Choices strange behavior with modal windows plugin tingle.js

[narsiliko]

I initialized Choices this way:

document.querySelectorAll('.js-select-dropdown').forEach(function(select) {
  const dropdown = new Choices(select, {
    searchEnabled: false,
  });
  dropdown.passedElement.element.addEventListener('change', function(event) {
    select.dispatchEvent(new Event('input'));
  });
});

on this HTML:

<select class="js-select-dropdown" data-placeholder="Выберите причину жалобы" name="report_reason" data-pristine-required="data-pristine-required" data-pristine-required-message="Укажите причину">
  <option value="" placeholder="placeholder" selected="selected" disabled="disabled">Выберите причину жалобы</option>
  <option value="1">Вариант 1</option>
  <option value="2">Вариант 2</option>
  <option value="3">Вариант 3</option>
</select>

placed within modal:

<div class="js-modal base-modal" id="modalReportExperience">
  <div class="h1 margin-bottom-30">Пожаловаться</div>
  <p class="margin-bottom-50">Пожалуйста, укажите причину жалобы:</p>
  <form class="form" action="/">
    <div class="form-field margin-bottom-30">
      <select class="js-select-dropdown" data-placeholder="Выберите причину жалобы" name="report_reason" data-pristine-required="data-pristine-required" data-pristine-required-message="Укажите причину">
        <option value="" placeholder="placeholder" selected="selected" disabled="disabled">Выберите причину жалобы</option>
        <option value="1">Вариант 1</option>
        <option value="2">Вариант 2</option>
        <option value="3">Вариант 3</option>
      </select>
    </div>
    <div class="row justify-content-end">
      <div class="col-auto">
        <button class="btn btn--red w-100" type="submit">Пожаловаться</button>
      </div>
    </div>
  </form>
</div>

initialized this way:

try {
  modalsHTML = Array.prototype.slice.call(document.querySelectorAll(modalsSelector)); /* TODO: change to .js-modal only */

  for (let i = 0; i < modalsHTML.length; i++) {
    modals[modalsHTML[i].id] = new tingle.modal({
      closeMethods: ['overlay', 'button', 'escape'],
      closeLabel: null,
      onClose: function() {
        if (['opening'].indexOf(currentAction) > -1) {}
        if (['closing', 'opened'].indexOf(currentAction) > -1) {
          if (document.location.hash.substring(1) === this.modal.querySelector(modalsSelector).id) {
            history.pushState("", document.title, window.location.pathname + window.location.search);
            window.dispatchEvent(new Event('hashchange'));
          }
        }
      }
    });
    modals[modalsHTML[i].id].setContent(modalsHTML[i]);
  }

  // Remove modals HTML from DOM
  document.querySelector('#modals').remove();
} catch (error) {
  consoleError(error);
}

and when i choose something in dropdown - modal automatically closing.

Experimentally i found, that disabling modal closing on click on overlay there (removing 'overlay' option):

closeMethods: ['overlay', 'button', 'escape'],

prevents this strange modal closing related to select an option in dropdown.

But disabling closing modal on click on overlay is bad solution, i need close modal by "outside click".

Why selecting an option in dropdown affects to modal's overlay? Probably it connected with event bubbling or something like that, but now i have no idea, how i can fix this behavior.

Expected behavior
Selecting an option in dropdown shouldn't affect on modal's overlay and anything else outside of the dropdown.

Desktop (please complete the following information):

• OS: Ubuntu 18.04
• Browser: Chrome
• Version: 81.0.4044.122

But same bug i have on Windows 10 + Chrome