input tag is not working when used inside semantic ui modal

I am using semantic ui modal
inside it I have 1 input tag, 1 select and 2 btns
everything else is working but the input tag is not working, I cant write inside it.

I have not applied any event listener on this input tag, and Im using javascript, jquery for my project.

<div class="ui mini modal modalcss modal-for-adding-var transition visible active" id="modal-for-adding-var" style="margin-top: -100px;">
    <div class="add-modal-wrap">
      <div class="add-modal-heading">Add Variable</div>
      <div class="add-modal-body">
        <div class="variable-name-div">
            <span>Variable Name</span>
            <input type="text" id="variable-name101">
        </div>
        <div class="select-dataset-div">
            <span>Select Dataset</span>
            <select type="text" id="selected-dataset">
              <option selected="" disabled="" value=""> Select an option</option>
              <option value="cashflow" data-name="Cash Flow" id="cashflow">Cash Flow </option><option value="incomestatement" data-name="Income Statement" id="incomestatement">Income Statement </option><option value="balancesheet" data-name="Balance Sheet" id="balancesheet">Balance Sheet </option><option value="capitalstructure" data-name="Capital Structure" id="capitalstructure">Capital Structure </option><option value="covenants" data-name="Covenants" id="covenants">Covenants </option>
            </select>
        </div>
      </div>
      <div class="add-var-btn-grp">
        <button id="cancel-btn">Cancel</button>
        <button id="add-btn">Add</button>
    </div>
    </div>
    </div>

the input tag is on line 7

 <input type="text" id="variable-name101">