extnet / examples5.ext.net

Apache License 2.0
18 stars 17 forks source link

Form > ComboBox > Custom Search example wildcard search scrolls down picker #32

Closed fabriciomurta closed 1 year ago

fabriciomurta commented 1 year ago

Ext.NET forums' thread: Scroll problem with the combobox with Custom Search

If the first search in either Comb Boxes of the Form > Combo Box > Custom search example is the wildcard search, in Ext.NET 5 the dropdown will be scrolled down to Cowslip, the third entry in the list, and it will be initially highlighted.

This behavior is not displayed in Ext.NET 4's corresponding example.

fabriciomurta commented 1 year ago

This happens because Ext JS 7's behavior for the Combo Box AutoSelect feature will match * input with any records in the store, but the introduced Ext.form.field.ComboBox.doAutoSelectMatch() private method tries to optimize the search by limiting the valid entries by their length, thus it ends up selecting the entry with shortest length by eliminating potential matches longer.

With the plants data used in the example, it falls in the Cowslip entry, which is the third. Thus it gets selected, and the layout system scrolls it so it's shown in the top of the picker, which causes the scrolling effect.

The trigger to this special treatment is done in Ext.form.field.ComboBox.afterQuery() and previously, it always called [doAutoSelect())[https://docs.sencha.com/extjs/7.3.1/classic/src/ComboBox.js.html#line1735], which happened to select the first entry when the query was *, thus the issue never happened in early Ext.NET versions.

All that said, to fix the issue in the example, it is sufficient to set the Combo Box's AutoSelect to false. :)

fabriciomurta commented 1 year ago

Applied the simple fix via 8512adf. The fix is already live in the EE website.