Мобильная клавиатура скрывает поля ввода внутри bootstrap модально

Question

в этом базисе c реализация bootstrap 4

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

https://jsfiddle.net/diquispe/svqer8a7/

, когда текст губной пометки перед модальным, и мы нажимаем в первом поле ввода

, когда текст губной помады идет после модальной кнопки

как мне скрыть поля