Bug - Select inside ng-repeat - Last added select only responds to press rather than tap


#1

I have an ng-repeat which creates a grid, and in one of the cells of each row I have added a select input.

              <div class="item no-padding profile-brands" ng-repeat="brand in profile.brands">
                <div class="row no-padding profile-brand">
                  <div class="col no-padding col-20">
                    <ion-toggle ng-model="brand.isPermanent" toggle-class="toggle-calm">{{brand.isPermanent}}</ion-toggle>
                  </div>
                  <div class="col no-padding">
                    <label class="item item-input item-select">
                      <span class="input-label">NAME</span>
                      <select id="input-brand-{{$index}}" ng-model="brand.id" ng-options="s.id as s.marketingName for s in subTypes"></select>
                    </label>
                  </div>
                  <div class="col col-20 no-padding">
                    <label class="item item-input item-stacked-label">
                      <span class="input-label">PRICE</span>
                      <input type="number" ng-model="brand.price">
                    </label>
                  </div>
                  <div class="col col-10 no-padding">
                    <button class="button button-calm button-clear icon ion-close"
                            ng-click="removeBrand(profile.brands, $index)"></button>
                  </div>
                </div>
              </div>

When I click a button to add a new item to the array, it creates a new row with a new select input inside.

The bug is that the select in the last added row only initially responds to a slightly longer ‘press’ rather than a ‘tap’.
Once it has been pressed for the first time, a ‘tap’ gesture is then recognised every time.

I have noticed that when a new select is added to the DOM, Angular adds an ng-untouched class, which is then changed to ng-touched. Not sure if this is relevant at all?

Just to reiterate, this ONLY happens for the last select input added. If you add 3 new row, select inputs number 1 and 2 both respond to a ‘tap’, however the final one requires a slightly longer press initially,.

Has anyone else had this problem?
It’s not a very good user experience and I am trying to fix this for a client.

Thanks!