stop scroll to top by clicking angular xeditable field in ng-repeat form

Question

When I click on one of the xeditable fields in my form which is populated by ng-repeat, the form scrolls to the top.

    <form editable-form name="myxedit">
        <fieldset ng-repeat="shop in myModel.shops track by $index">
            <h2>Map Test # {{$index + 1}}</h2>

            <div class="col-md-6 pac-card" id="pac-card">
                <input id="pac-input-{{$index}}" title="Search" type="text" ng-change="cityCode($index)" ng-model="shop.placeName" />
                <div>city is: {{shop.city}}</div>
                <div>country is: {{shop.country}}</div>
            </div>
            <div id="map_canvas-{{$index}}" style="height: 200px;width: 200px;"></div>
            <div class="form-group">
                <input id="radio-{{$index}}" type="checkbox" ng-model="shop.isFirst" name="firstShop" style="-webkit-appearance: radio;-moz-appearance: radio;-ms-appearance: radio;" ng-change="firstShopChange($index)">
                <label for="radio-{{$index}}">First Shop</label>
            </div>
            <div class="col-md-12">
                <div class="form-group" ng-if="myModel.shops.length > 1">
                    <span class="btn btn-danger pull-right" ng-click="removeShop($index)">Remove Shop</span>
                </div>
            </div>

            <div>
                <span e-name="erer" class="editable-click" ng-click="$form.$show()" ng-disabled="myxedit.$waiting" e-ng-blur="$form.$hide()" href="#" editable-text="shop.address">
              {{ shop.address || 'empty' }}
          </span>
                <span ng-show="myxedit.$visible">
              <button type="submit" class="btn btn-primary" ng-disabled="myxedit.$waiting">
                <span class="glyphicon glyphicon-ok"></span>
                </button>
                <button type="button" class="btn btn-default" ng-disabled="myxedit.$waiting" ng-click="myxedit.$cancel()">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
                </span>
            </div>

        </fieldset>
    </form>

I have only one xeditable field in every ng-repeat.
How can I stop it from scrolling to the top?
As you can see that I am tracking the ng-repeat by index, let's say I click on xeditable field in the third fieldset that is repeated by ng-repeat, the form scrolls to top to the xeditable in the first fieldset.

update:

here is the plunker. https://plnkr.co/edit/y8UHwTHTxtxvQYSWICoh?p=preview
this strange behaviour is visible if you add more shops, and then click on the xeditable field in the last shop, and the form will scroll to the top.

Answer 1

When you enable the form edit it is scrolling to the first xeditable input field, I think this functionality is by default, so what I suggest is disable all the xeditable elements except the one that was clicked. Thus it will not scroll. Also I have included a function that will set the focus to the input element, so that it will give better user experience.

Issue: On checking the angular xeditable forms documentation, I found that you were using $form.show(), this was causing some problems, I strictly adhered to the documentation and rewrote the HTML it works great. Please find below the updated fiddle.

Please find a working example in the below plunkr

Plunkr

HTML:

<span e-name="erer" class="editable-click" ng-init="shop.disabled=false;" ng-click="shop.disabled=true;myxedit.$show();setFocus($event);" e-ng-disabled="!shop.disabled" ng-disabled="myxedit.$waiting" e-ng-blur="myxedit.$hide()" href editable-text="shop.address">
    {{ shop.address || 'empty' }}
</span>

JS:

$scope.setFocus = function(event){
      event.target.nextSibling.childNodes[0].childNodes[0].focus(); //selects the input element
}

Answer 2

This is happening because after click, your first input field get focus. I guess function $form.$show() in xeditable is doing that. Try to find that code and eliminate it or try to change it to get focus on your current clicked input field.