I am trying to implement a dialog in my code but the dialog is only working on a second click the first time the page is loaded. After that, is works good every time I click the button.

The first time I click the button is giving me the following error:

Uncaught TypeError: Cannot read property 'call' of undefined
    at n.(:8000/anonymous function).(anonymous function)._trigger (http://localhost:8000/?package=js:41:23960)
    at n.(:8000/anonymous function).(anonymous function)._trigger (http://localhost:8000/?package=js:41:5374)
    at n.(:8000/anonymous function).(anonymous function)._createWidget (http://localhost:8000/?package=js:41:7432)
    at new n.(:8000/anonymous function).(anonymous function) (http://localhost:8000/?package=js:41:4957)
    at HTMLDivElement.<anonymous> (?package=js:41)
    at Function.each (?package=js:36)
    at i.fn.init.each (?package=js:36)
    at i.fn.init.n.fn.(:8000/anonymous function) (http://localhost:8000/?package=js:41:6582)
    at i.fn.init.t.(:8000/anonymous function) [as draggable] (http://localhost:8000/?package=js:41:235499)
    at n.(:8000/anonymous function).(anonymous function)._makeDraggable (http://localhost:8000/?package=js:41:161342)

Can you help me to understand why the first time I have to do a double click?

$("#myAlertButton2").click(showDialog1)

function showDialog1() {
  $("#dialog1").dialog({
    title: 'Patient Profile Export Tool',
    close: (event, ui) => {
      $(this).dialog("destroy");
    }
  });

  $("#dialog1").dialog("option", "width", 250);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" />

<div>
  <h3>Patient Profile Export Tool</h3>
  
  <div>
    <button id='myAlertButton2'>Double Click to Generate Report</button>
  </div>
  
  <div id="dialog1">
    <h4>Please Select a Subject</h4>
  </div>
</div>