Keyboard autofocus being triggered on input fields

[justyn44]

Hey guys,

I'm having an issue where I'm finding the keyboard is being launched on my input fields. I have a ul list, and each li has the data-goto attribute that links it to another article in the html code. Page transitions and everything work smoothly, but I notice that when I tap on (and this only happens on device, it can't be replicated on the iOS simulator) on an li item, the keyboard is auto-launched once the new html article is loaded it with the focus on a particular li item.

Let me expand on that a little bit, when I click on the first li item, the first input box is active once the new article loads, when I click on the second li item, the second text box is active once the new article loads. This continues on for as many input boxes as there are. If there are more li items than input boxes, then no input is autofocused if the clicked li item exceeds that number.

I'm stumped as to why this is happening. Your help is greatly appreciated! Hopefully someone can shed some light. I've attached some sample code so you can take a look.

Thanks a ton!

  <article id='active-statuses' class="next list-page">
    <section>
      <h2>In Progress</h2>
      <ul id='active-status-list' class='list'>
        <li class='nav investigating' data-goto="new-status">
          <div>
            <h3>Leaking Roof</h3>
          </div>
        </li>

        <li class='nav identified' data-goto="new-status">
          <div>
            <h3>Garage Door Stuck</h3>
          </div>
        </li>

        <li class='nav inprogress' data-goto="new-status">
          <div>
            <h3>Shovel Sidewalk</h3>
          </div>
        </li>

        <li class='nav resolved' data-goto="new-status">
          <div>
            <h3>Fire Alarm Tests</h3>
          </div>
        </li>
      </ul>   
    </section>
  </article>

  <article id='new-status' class="next list-page">
    <section>

      <h2 id="title">Create New Status</h2>
      <div class='horizontal centered'>
        <div class='segmented current-status' id="status-buttons"></div>
      </div>

      <ul class='list'>

        <form id="statusForm" action="#">

            <ul id="update-list" ui-implements='form' class='list icon-list'>
              <li class='comp'>
                <div>
                  <label for='subject'><img src="img/emailSubject.svg" height="11" /></label>
                </div>
                <aside>
                  <input id="subject" type="text" name="user.subject" placeholder="Email Subject" autocapitalize="on" autocorrect="off" required>
                </aside>
              </li>
              <li class='comp'>
                <div>
                  <label for='content'><img src="img/emailContent.svg" height="13" /></label>
                </div>
                <aside>
                  <textarea id="content" type="text" name="user.content" placeholder="Email Content" autocapitalize="on" autocorrect="off" required></textarea>
                </aside>
              </li>
              <li class='comp'>
                <div>
                  <label for='sms'><img src="img/sms.svg" height="15" /></label>
                </div>
                <aside>
                  <input id="sms" type="text" name="user.sms" placeholder="SMS Content" autocapitalize="on" autocorrect="off" required>
                </aside>
              </li>                   
            </ul> 

            <div id='loginBtns'>
              <button id="saveSubmit" type="submit">SEND UPDATE</button>
            </div>  

        </form>      
    </section>
  </article>