JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog">
  <input value="first focus on this line">
  line1<br>
  line2<br>
  line3<br>
  line4<br>
  line5<br>
  <select size=10 multiple>
    <option>line 1 - click here, wrong line will be selected</option>
    <option>line 2 - click here, wrong line will be selected</option>
    <option>line 3 - click here, wrong line will be selected</option>
    <option>line 4 - click here, wrong line will be selected</option>
    <option>line 5 - click here, wrong line will be selected</option>
    <option>line 6 - click here, wrong line will be selected</option>
    <option>line 7 - click here, wrong line will be selected</option>
    <option>line 8 - click here, wrong line will be selected</option>
    <option>line 9 - click here, wrong line will be selected</option>
    <option>line 10 - click here, wrong line will be selected</option>
    <option>line 11 - click here, wrong line will be selected</option>
    <option>line 12 - click here, wrong line will be selected</option>
    <option>line 13 - click here, wrong line will be selected</option>
    <option>line 14 - click here, wrong line will be selected</option>
    <option>line 15 - click here, wrong line will be selected</option>
  </select>
</div>

JavaScript

$('#dialog').dialog({
    modal  : true,
    width  : 400,
    height : 300
})