I have a bootstrap modal that includes input text. I've added the input text to introJs steps to highlight it and for the user to be able to input their name etc. But once the input text was highlighted, I'm not able to change its values. Maybe because they are the same modal? Its working if the input text is not on a popup modal.

Here are some sample script.

<div class="modal fade" tabindex="-1" role="dialog" id="addModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal Title</h4>
      </div>

      <form role="form" action="#" method="post" id="createForm">
        <div class="modal-body">
          <div class="form-group">
            <label for="brand_name">Name</label>
            <input type="text" class="form-control" data-step='add_name' id="name" placeholder="Enter Name">
          </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>





const intro = introJs();

intro.setOptions({
  doneLabel: 'Next',
  exitOnOverlayClick: false,
  steps: [
    {
      intro: 'Enter you name',
      element: '#name',
    }
  ]
})
if (RegExp('multipage', 'gi').test(window.location.search)) {

  intro.start().onchange(function(targetElement) {
    if ($(targetElement).attr("data-step") == 'add_name') {
      $("#addModal").modal('show');
    }
  }));
}