Inputs in Bootstrap and Jquery-ui stacked modal are not working

jQuery(document).ready(function($){

  $(document).on('click', '#show-ui-modal', function(){

      $("#eventContent").dialog({ 
          modal: true, 
          title: 'some title', 
          width:550, 
          clickOutside: false
      });
  });
  $(document).on('click', '#show-modal', function(){
    $('#blank-modal').modal('show');
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><button id="show-ui-modal">Show ui modal</button><div id="eventContent" title="Event Details" style="display:none;" data-msg="" data-done=""><div id="view"><button id="show-modal">Show Bootstrap modal</button></div><p id="eventInfo"></p></div><div class="modal fade" role="dialog" id="blank-modal" data-focus="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">A modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">
        the modal body<form action="#"><div class="form-group"><label for="input1">
              Input working?</label><input type="text" name="input1" id="input1" class="form-control"></div><div class="form-group"><label for="checkbox1">
              CheckBox working?<input type="checkbox" name="checkbox1" id="checkbox1"></label></div></form></div></div></div></div>