Vertical mouse movement triggers scrolling in treegrid in latest Chome

[SimonF]

Hi there,
TreeGrid scrolling does not seem to behave correctly in Chrome (tested with Chrome Version 62.0.3202.94) and the latest nightly (SmartClient_v111p_2017-11-22_Pro). After scrolling down for the first time (either using the scroll bar or the mouse wheel), the mouse cursor (any vertical movement) in the treegrid seems to trigger an upwards-scrolling as well.


Therefore it's very hard to select e.g. the Treenode "Section 5"

isc.Window.create(
 {
  "ID":"window_1",
  "width":440,
  "top": 20,
  "left": 20,
  "height":300,
  "autoDraw":true,
  "title":"Window",
  "items":
  [ isc.VLayout.create(
    {
     "ID":"rootLayout_1",
     "width":"100%",
     "height":"100%",
     "members":
     [  isc.VLayout.create(
       {
        "ID":"contentLayout_1",
        "width":"100%",
        "height":"100%",
        "contents":"",
        "members":
        [ isc.HLayout.create(
          {
           "ID":"rootHLayout_1",
           "autoDraw":false,
           "members":
           [ isc.VLayout.create(
             {
              "ID":"vLayout_1",
              "members":
              [ isc.TreeGrid.create(
                {
                 "ID":"selectionTreeGrid_1",
                 "width":"100%",
                 "height":"100%",
                 "showResizeBar":false,
                 "selectionType":"multiple",
                 "canEdit":false,
                 "alternateRecordStyles":false,
                 "showFilterEditor":false,
                 "wrapCells":true,
                 "fixedRecordHeights":false,
                 "selectionAppearance":"checkbox",
                 "canGroupBy":false,
                 "showSelectedStyle":false,
                 "showHeader":false,
                 "fields":
                 [
                  {
                   "name":"stepsTreeGridField",
                   "title":"",
                   "type":"text",
                   "width":"100%",
                   "canEdit":false,
                   "canSort":false
                  }
                 ],
                 "openIconSuffix":"",
                 "closedIconSuffix":"",
                 "selectionProperty":"isSelected",
                 "cascadeSelection":true,
                 "showPartialSelection":true,
                 "members":
                 [],
                 data:isc.Tree.create(
                  {
                   "ID":"selectionTree_1",
                   "modelType":"children",
                   "childrenProperty":"children",
                   "openProperty":"isOpen",
                   "root":
                   {
                    "title":"Root",
                    "isFolder":false,
                    "isOpen":false,
                    "id":"root",
                    "isSelected":false,
                    "canSelect":true,
                    "children":
                    [
                     {
                      "title":"",
                      "isFolder":true,
                      "isOpen":false,
                      "id":"6",
                      "isSelected":true,
                      "canSelect":true,
                      "stepsTreeGridField":"Section 1",
                      "children":
                      [
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"1",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 1"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"2",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 2"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"3",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 3"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"4",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 4"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"5",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 5"
                       }
                      ]
                     },
                     {
                      "title":"",
                      "isFolder":true,
                      "isOpen":false,
                      "id":"17",
                      "isSelected":true,
                      "canSelect":true,
                      "stepsTreeGridField":"Section 2",
                      "children":
                      [
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"7",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 1"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"8",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 2"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"9",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 3"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"10",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 4"
                       },
                       {
                        "title":"",
                        "isFolder":true,
                        "isOpen":false,
                        "id":"16",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 5",
                        "children":
                        [
                         {
                          "title":"",
                          "isFolder":false,
                          "isOpen":false,
                          "id":"11",
                          "isSelected":true,
                          "canSelect":true,
                          "stepsTreeGridField":"Element 6"
                         },
                         {
                          "title":"",
                          "isFolder":false,
                          "isOpen":false,
                          "id":"12",
                          "isSelected":true,
                          "canSelect":true,
                          "stepsTreeGridField":"Element 7"
                         },
                         {
                          "title":"",
                          "isFolder":false,
                          "isOpen":false,
                          "id":"13",
                          "isSelected":true,
                          "canSelect":true,
                          "stepsTreeGridField":"Element 8"
                         },
                         {
                          "title":"",
                          "isFolder":false,
                          "isOpen":false,
                          "id":"14",
                          "isSelected":true,
                          "canSelect":true,
                          "stepsTreeGridField":"Element 9"
                         },
                         {
                          "title":"",
                          "isFolder":false,
                          "isOpen":false,
                          "id":"15",
                          "isSelected":true,
                          "canSelect":true,
                          "stepsTreeGridField":"Element 10"
                         }
                        ]
                       }
                      ]
                     },
                     {
                      "title":"",
                      "isFolder":true,
                      "isOpen":false,
                      "id":"24",
                      "isSelected":true,
                      "canSelect":true,
                      "stepsTreeGridField":"Section 3",
                      "children":
                      [
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"18",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 1"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"19",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 2"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"20",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 3"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"21",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 4"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"22",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 5"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"23",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 6"
                       }
                      ]
                     },
                     {
                      "title":"",
                      "isFolder":true,
                      "isOpen":false,
                      "id":"27",
                      "isSelected":true,
                      "canSelect":true,
                      "stepsTreeGridField":"Section 4",
                      "children":
                      [
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"25",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 1"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"26",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 2"
                       }
                      ]
                     },
                     {
                      "title":"",
                      "isFolder":true,
                      "isOpen":false,
                      "id":"30",
                      "isSelected":true,
                      "canSelect":true,
                      "stepsTreeGridField":"Section 5",
                      "children":
                      [
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"28",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 1"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"29",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 2"
                       }
                      ]
                     },
                     {
                      "title":"",
                      "isFolder":false,
                      "isOpen":false,
                      "id":"31",
                      "isSelected":true,
                      "canSelect":true,
                      "stepsTreeGridField":"Element 3"
                     },
                     {
                      "title":"",
                      "isFolder":true,
                      "isOpen":false,
                      "id":"38",
                      "isSelected":true,
                      "canSelect":true,
                      "stepsTreeGridField":"Element 4",
                      "children":
                      [
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"32",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 5"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"33",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 6"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"34",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 7"
                       },
                       {
                        "title":"",
                        "isFolder":true,
                        "isOpen":false,
                        "id":"37",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 8",
                        "children":
                        [
                         {
                          "title":"",
                          "isFolder":false,
                          "isOpen":false,
                          "id":"35",
                          "isSelected":true,
                          "canSelect":true,
                          "stepsTreeGridField":"Element 9"
                         },
                         {
                          "title":"",
                          "isFolder":false,
                          "isOpen":false,
                          "id":"36",
                          "isSelected":true,
                          "canSelect":true,
                          "stepsTreeGridField":"Element 10"
                         }
                        ]
                       }
                      ]
                     },
                     {
                      "title":"",
                      "isFolder":true,
                      "isOpen":false,
                      "id":"41",
                      "isSelected":true,
                      "canSelect":true,
                      "stepsTreeGridField":"Section 6",
                      "children":
                      [
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"39",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 1"
                       },
                       {
                        "title":"",
                        "isFolder":false,
                        "isOpen":false,
                        "id":"40",
                        "isSelected":true,
                        "canSelect":true,
                        "stepsTreeGridField":"Element 2"
                       }
                      ]
                     }
                    ]
                   }
                  }
                  )
                }
                )
              ]
             }
             )
           ]
          }
          )
        ]
       }
       )
     ]
    }
    )
  ],
  "showCloseButton":true,
  "showHeaderIcon":false,
  "canDragResize":true,
  "members":
  []
 }
 )

Kind regards

[SimonF]

Hi there,
are there any news yet?

[Isomorphic]

You reported the problem one business day ago. We'll be looking at it soon.

[Isomorphic]

This appears to be yet another Chrome-specific bug as it doesn't seem to affect any of the other browsers we looked at. We've applied a fix to workaround the issue to SC 11.1p and newer releases (the only ones that should be affected by this issue), which should be in the nightly builds dated 2017-11-30 and beyond.

Note that it looks like you don't want to see the folder icons, but the way you've approached it generates 404 errors as the browser attempts to retrieve non-existent files from the server. Instead, it would probably be preferable to set TreeGrid.folderIcon to null if you don't want to see the folder icons, and similarly with nodeIcon if you wanted to suppress them as well.

[SimonF]

The issue seems to be fixed, thank you.
In the example there was indeed a small mistake regarding the folder icons. This was a mistake when minimalizing the problem from our code to a reproducible minimalistic example.