Results 1 to 4 of 4

Thread: ComboBox typeahead causes selected value to be incorrectly scrolled to the right

    You found a bug! We've classified it as EXTJS-21052 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    66

    Default ComboBox typeahead causes selected value to be incorrectly scrolled to the right

    Hi all,

    Using ExtJS 6.0.2 we're observing a ComboBox behavior that is problematic from a UX perspective and I believe it's a bug. It's somewhat hard to explain in text as I attempted in the title, but here's a screenshot to demonstrate:

    1.jpg

    Here we have two ComboBox's. As you can see, there's two options. Now, simply select an option in the "Good" one and you can see that the selected option appears correctly: you see the beginning of it on the left with the "overflow" portion of the string to the right out of view. But, make a selection in the "Bad" one and what you see is the RIGHT side of the option, like so:

    2.jpg

    The code that demonstrates this is the following:
    Code:
    Ext.define("comboBoxModel", {
      extend : "Ext.data.Model",
      fields : [ "value", "name"]
    });
    comboBoxStore = new Ext.data.Store({
      fields : [ "value", "name" ],
      data : [
        { value : "1111", name : "ABCDE - 123456789 - This is my personal investment account" },
        { value : "2222", name : "FGHIJ - 987654321 - There are many like it but this one is mine" }
      ]
    });
    
    Ext.onReady(function() {
    
      new Ext.Viewport({
        layout : "border",
        items : [
          { region : "center",
              items : [ 
              { xtype : "combobox", id : "myGoodCombo", fieldLabel : "Good", 
                  width : 250,  queryMode: "local", store : comboBoxStore, 
                displayField : "name", valueField : "value",
                listConfig : { minWidth : 400 }, padding : 10,
                typeAhead : false
              },
              { xtype : "combobox", id : "myBadCombo", fieldLabel : "Bad", 
                  width : 250,  queryMode: "local", store : comboBoxStore, 
                displayField : "name", valueField : "value",
                listConfig : { minWidth : 400 }, padding : 10,
                typeAhead : true
              },
                ]
              }
          ]
      });
    
      Ext.getCmp("myGoodCombo").select("1111");
      Ext.getCmp("myBadCombo").select("1111");
    
    });
    To make matters worse, it is inconsistent across browsers. The above is what happens in Firefox (46) but in Chrome (50.0.2661.94m) it's a bit different. There, clicking the down arrow on a ComboBox that is currently displaying an option immediately results in the cursor scrolling all the way to the right, so you only see the right side as in the "Bad" one above. Then, when you select an option, it again displays incorrectly, the right side of the option, until loss of focus, when it scrolls back to the left and shows the start of the option. This happens for both the "Good" and "Bad" ComboBox's, there's no difference under Chrome.

    I don't personally like the Chrome behavior, it seems incorrect to me generally, but even that WOULD be acceptable if it at least happened consistently across browsers.

    If you look at the code you can pick out the cause right away because it's the only difference in the configuration: typeAhead. When enabled, the problem occurs, with it set to false the problem does not occur (except as described in Chrome where it works the same, arguably incorrect, way, with or without typeAhead enabled).

    Under IE 9, the behavior is actually what I believe it SHOULD be: it never scrolls to the right, you always see the start of the selected option, and clicking the down arrow doesn't scroll it any way. Interesting that under IE, an older version at this point, is where it seems to work exactly as it should, given that *IE* is normally the problem child browser

    This seemingly minor issue is actually giving my business people a lot of heartburn, though I think they have a point about it being bad UX, so I'm hoping there's either a simple solution and this isn't REALLY a bug, or that it can be confirmed as such quickly, added to the work for the next release, and I can at least report that back and get some personal relief on this issue

    Thanks,
    Frank

  2. #2
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    66

    Default

    Just bumping this thread, since I can't peer into the bug tracker myself... has this received any attention?

  4. #4
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    66

    Default

    Bump #2. I just tried with v6.2.1 and the issue is still present. Any update on this?

Similar Threads

  1. Replies: 4
    Last Post: 5 Jun 2015, 10:57 AM
  2. Replies: 5
    Last Post: 17 Sep 2013, 7:54 PM
  3. Replies: 3
    Last Post: 21 May 2012, 1:29 AM
  4. list can't be scrolled or selected
    By worldblender in forum Sencha Touch 2.x: Q&A
    Replies: 5
    Last Post: 7 Feb 2012, 1:03 AM
  5. Replies: 0
    Last Post: 16 May 2011, 4:10 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •