@mbrookson wrote:
I have an
ng-repeat
which creates a grid, and in one of the cells of each row I have added aselect
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!
Posts: 1
Participants: 1