Datatable filter: focus lost on filter when the width of column is ajusted

Hello,

See example:
http://webix.com/snippet/bf031922

If now I type "def" in first filter (H1 column).
after some second I lost the focus and now if I press backspace I go to previous page because I have lost the focus.

This issue occurs when I have adjust: "data" parameter and the column width change when the filter is executed.

Webix: 3.1
With IE 11 and Chrome: 46.0.2490.86

Regards,

Tagged:

Comments

  • Hi,

    focus is lost as the datatable paints self in order to adjust to new data set.

    As a workaround you can save the column you filter and focus its filter input after filtering: http://webix.com/snippet/f6cf457e

  • The issue can't be fully solved, as re-adjustiing data will result in repainting the datatable. As result, the focus will be lost.

    You can

    a) Block the global "backspace" key handler, to prevent not-expected page unloading.

    b) Change the logic how adjust work, and auto-size columns only after initial data loaidng

    http://webix.com/snippet/00f8c7b7

  • Hello,

    Thanks for the feedback.

    Currently I have deactivated this settings. Before I create the datatable I use the method: webix.html.getTextSize to compute the maximum width of each columns.
    That working fine.

    Regards

  • Hello Helga,

    For you proposition, I have tested and I have issue with IE 11.
    With IE 11 the focus is good but the cursor is not in good position.
    I have fixed this solution (by setup selectionEnd and selectionStart):
    http://webix.com/snippet/b7f752b3

    Thanks for your help

  • Hello Maksim,

    Thanks for your solution.
    That working well.

    Regards,

    Eric.

  • edited January 2

    I fix it.
    remove adjust:true

    on:{
        onAfterLoad:function(){
            this.adjustColumn("seq");
            this.adjustColumn("tableName");
            this.adjustColumn("tableComment");
        }
    }
    
  • edited January 2

    As others explained, the culprit is the width auto "adjust" attribute of the columns configuration. As @song7749 mentioned, removing adjust:true after the table loads solve the issue.
    I came up with the generic solution below:

            on:{
                onAfterLoad: function() {
                    for (var i in this.config.columns) {this.config.columns[i].adjust = false;}
                }
    
Sign In or Register to comment.