RobertoPrevato / jQuery-KingTable

A jQuery plugin for administrative tables that are able to build themselves, on the basis of the input data.
MIT License
117 stars 33 forks source link

Page jumps to table when table.render(); is called #6

Closed jp-src closed 7 years ago

jp-src commented 7 years ago

Hello,

using Internet Explorer 11, the page jumps to the upper bound of the table when table.render(); is called. If I comment it out, the page does not jump and remains at the top.

Any help would be greatly appreciated.

RobertoPrevato commented 7 years ago

Hi @JeromePrunera, Thanks for the heads up, I was able to reproduce this bug in Google Chrome and find its exact reason, I just pushed an update to fix it: GitHub commit.

Please let me know if it resolves your problem, I will close this issue.

Description of the problem:

For user friendliness, I decided to trigger the focus of the search field upon render (so that the user is able to start typing immediately to look for results). The problem is that, focusing the input field forces the page to jump to this field - to make it visibile.

    // piece of code that was causing the bug: (inside jquery.kingtable-lodash.js)
    focusSearchField: function () {
      var self = this;
      _.delay(function () {
        var sfield = $(".search-field").trigger("focus"),
          search = self.pagination.search;
        if (search) {
          sfield.get(0).selectionStart = search.length;
        }
      }, 50);
      return self;
    },

Resolution:

In order to keep some grade of user friendliness, the search field is focused only when the page scroll is 0 (the page is already at the top of the page). An option has been added, to allow disabling focus completely (details below). An empirical approach that is worth investigating, is to trigger focus also when the page scroll is little (i.e. greater than 0 but not so big to cause the page jump).

    focusSearchFieldOnRender: false  // To disable focus for a single table

To disable focus globally, by default, for all instances of KingTable:

    $.KingTable.prototype.defaults.focusSearchFieldOnRender = false;
jp-src commented 7 years ago

Hello @RobertoPrevato,

thanks for your prompt and thorough response. I have tested with IE and Chrome, adding the new setting in the initialization of the table. Both state of the focusSearchFieldOnRenderare working per design.

Thank you very much!