ngTouch breaks forms/input fields

641 Views Asked by At

we have a hybrid Angular app which is experiencing the dreaded 300ms delay, even though it should be working (since the correct meta tags have been set).

We tried getting around this issue by using the FastClick library and it worked for Safari on iOS and Firefox on Android. But in Chrome on Android the same issue persists.

We tried replacing FastClick by including the Angular ngTouch module and it solved most of the issues on Chrome.

Now for some reason though, all input fields no longer work. Touching them is being recognised because the CSS of the fields changes, but now we can't enter any data. Long pressing the input makes the cursor appear inside the input field, but the keyboard does not come up on mobile devices. The submit button of the form also no longer works.

This issue is not only visible on mobile devices, but even when using the Chrome Dev Tools to debug locally.

We are using version 1.3.15 of both Angular and Angular-touch.

Here is an example of the login form which we use:

        <form name="login_form" class="form" shake submitted="submitted" ng-submit="login(login_form.$valid)" novalidate autocapitalize="none">

      <div class="form-group">
        <input type="text" name="name" class="form-control" ng-model="username" required />
        <label placeholder="{{'site.userName' | translate}}"></label>
        <div ng-show="(login_form.name.$invalid && login_form.name.$dirty) || (login_form.name.$pristine && submitted)" class="required">
          <span>{{'login.usernameRequired' | translate}}</span>
        </div>
        <!--<hr class="form-group-separator">-->
        <input type="password" name="password" class="form-control last-visible-form-control" ng-model="credentials.password" required />
        <label class="responsive" placeholder="{{'site.password' | translate}}"></label>
        <div ng-show="(login_form.password.$invalid && login_form.password.$dirty) || (login_form.password.$pristine && submitted)" class="required">
          <span>{{'login.passwordRequired' | translate}}</span>
        </div>

        <ul>
          <li>
            <label>{{'site.stayLoggedIn' | translate}}</label>
            <span class="value">
              <span class="form-check"
                 ng-class="{'checked':credentials.save}"
                 ng-model="credentials.save"
                 ng-click="toggleStayLoggedIn()"></span>  
            </span>
          </li>
        </ul>
      </div>

      <div class="form-group">
        <!--<button type="submit"></button>-->
        <button type="submit" class="cta green">
          {{'site.login' | translate}}
          <span data-svg-icon icon="circle-right-arrow"></span>
        </button>
      </div>
    </form>
0

There are 0 best solutions below