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.

I ran your plunker and the behavior you described doesn't happen. Which browser are you using? — quirimmo, Aug 26 '17 at 22:17
@quirimmo did you add several shops? add as many shops as possible so that you are seeing the last shop, the first one is out of sight in your browser. and then click on the xditable field, which is by default a red "empty" field. and then it will scroll to the top. I am using chrome; — Bonnard, Aug 26 '17 at 22:21
I use chrome as well, I added 10 shops and I tried clicking but nothing scrolls — quirimmo, Aug 26 '17 at 22:28
@quirimmo where are you clicking? you should click on the last "empty" , which is red, and which "on click" opens the xeditable field. — Bonnard, Aug 26 '17 at 23:10

Naren Murali · Accepted Answer · 2017-08-27T10:07:20.103

2

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
}

edited Aug 27 '17 at 10:07

answered Aug 27 '17 at 06:53

Naren Murali

19,250
3
27
54

this is very nice and working. but when I added this to my code, i started editing a field and then clicked the check mark to save, it didn't save, i mean it didn't take into account the newly edited value. when i pressed enter, again same, nothing happens, the old value is there. whereas in my dev (not in my plunker), environment, before adding your code, i used to click on the check mark to take on the new value. – Bonnard Aug 27 '17 at 09:10
@Bonnard that was not happening in your original code itself, if you check your Plunkr. Please check this. – Naren Murali Aug 27 '17 at 09:27
in my original plunker and your plunker, if i edit the field and click on the check mark, the new value doesn't get saved and shown instead of the default "empty". why is it happening? only when pressed enter, the new value gets saved. – Bonnard Aug 27 '17 at 10:02
@Bonnard I updated my answer with the problem and the solution. – Naren Murali Aug 27 '17 at 10:07

score 1 · Answer 2 · answered Aug 27 '17 at 04:59

1

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.

answered Aug 27 '17 at 04:59

adda82

165
1
4

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

update:

2 Answers2