Extension component. Error in selecting a row of the ListGrid.

[Hirn]

I have two nested extension ListGrids. When selecting a row in the second table, the selection is incorrect: I click on the first row, but the third one gets selected instead.
This issue occurs only on the first click inside the ListGrid and only in the Chrome browser.
You can see the issue in the video.
I’ve also prepared an example where the problem can be reproduced.

https://www.youtube.com/shorts/7Co0Yiw9eLE


App.js.txt
users.json.txt
templates.json.txt

Google Chrome 138.0.7204.97
SmartClient Version v13.1p_2025-07-04/Pro Deployment (2025-07-04)

The same issue also occurs in SmartGWT 12.1pro from July 4, 2025.

[Hirn]

Is there any prospect of this issue being resolved?

[Hirn]

I found a workaround for my example; maybe it will help you...
Below is the code of my solution.

function createTemplateUserExpansion(user) {
      var layout = isc.VLayout.create({
        width: "100%", height: 1, margin: 5, padding: 5, styleName: "popup-panel",
        members: [
          isc.ListGrid.create({
            width: "100%", selectionType: "multiple", showHeader: false, overflow: "visible", bodyOverflow: "visible", border: "0px solid",
            fields: [
              { name: "name" }
            ],
            data: groups,
            mouseDown: function () {
              let i = 0;
            },
            cellMouseDown: function (record, rowNum, colNum) {
// this is my fix bug
              var lg = this;
              var ev = window.event;
              var clientX = ev?.clientX;
              var clientY = ev?.clientY;
              setTimeout(function () {
                var correctRow = (typeof lg.getEventRow === "function") ? lg.getEventRow() : null;
                if ((correctRow == null || correctRow < 0) && clientX != null && clientY != null) {
                  var el = document.elementFromPoint(clientX, clientY);
                  if (el && typeof lg.getEventRow === "function") {
                    correctRow = lg.getEventRow();
                  }
                }
                let correctRecord = lg.getRecord(correctRow);
                if (correctRow != null && correctRow >= 0) {
                  lg.selectOnMouseDown(correctRecord, correctRow, colNum);
                }
              }, 0);
              return false;
            }
          })
        ]
      });
      return layout;
    }

[Isomorphic]

We adjusted your sample code to run as standalone SmartClient code, and we couldn’t reproduce the issue. Could you try the following code and see whether you can reproduce the issue on your end? If you can reproduce the issue, please share any additional details that could help us reproduce it.

    let isc = window.isc;

    var templatesDS, usersDS, usersMap, groups = [];

    function loadUsers () {
      usersDS = isc.DataSource.create(
        {
          ID: "users", clientOnly: true,
          fields: [
            { name: "id", type: "text", primaryKey: true },
            { name: "type", type: "text" },
            { name: "name", type: "text" }
          ],
          dataURL: "api/users.json"
        }
      );
      usersDS.fetchData(null, onUsersLoaded.bind(this));
    }
    function onUsersLoaded (dsResponse, data, dsRequest) {
      if (dsResponse.status === 0) {
        let recordsMap = {};
        let records = usersDS.getCacheData();
        for (let object of records) {
          const name = object.id;
          if (name) {
            recordsMap[name] = object;
          }
        }
        usersMap = recordsMap;
        loadTemplates();
      }
    };

    function loadTemplates () {
      templatesDS = isc.DataSource.create(
        {
          ID: "templates", clientOnly: true,
          fields: [
            { name: "title", type: "text" }
          ],
          dataURL: "api/templates.json"
        }
      );
      templatesDS.fetchData(null, onTemplatesLoaded.bind(this));
    }

    function onTemplatesLoaded (dsResponse, data, dsRequest) {
      isc.VLayout.create({
          width:"100%",
          height:1800,
          layoutMargin:"5",
          membersMargin:"5",
          members: [
              isc.ListGrid.create({
                  width: "100%", height: "100%", showHeader: false, canResizeFields: false, showRollOver: false,
                  canExpandRecords: true, canExpandMultipleRecords: true,
                  data: templatesDS.cacheData,
                  fields: [
                    {
                      name: "title", canEdit: true
                    }
                  ],
                  getExpansionComponent: createTemplateExpansion.bind(this)
               })
           ]
      });
    };

    function createTemplateUserExpansion(user) {
      var layout = isc.VLayout.create({
        autoDraw: false,
        width: "100%", height: 1, margin: 5, padding: 5, styleName: "popup-panel",
        members: [
          isc.ListGrid.create({
            width: "100%", selectionType: "multiple", showHeader: false, overflow: "visible", bodyOverflow: "visible", border: "0px solid",
            fields: [
              { name: "name" }
            ],
            data: groups,
            mouseDown: function () {
              let i = 0;
            },
            cellMouseDown: function (record, rowNum, colNum) {
              let i = 0;
            }
          })
        ]
      });
      return layout;
    }

    function createTemplateExpansion(template) {

      const usersMap1 = usersMap;
      let templateUsers = template.users;
      let projectGroups = [
        "558",
        "560",
        "1057",
        "1637",
        "561",
        "562",
        "563",
        "1686",
        "564",
        "565"
      ];

      //let groups = [];
      for (const group of projectGroups) {
        const serverUser = usersMap1[group];
        groups.push(serverUser ? { ...serverUser } : { name: "unknownUser" });
      }

      let users = [];
      for (const user of templateUsers) {
        const serverUser = usersMap1[user.id];
        users.push(serverUser ? { ...serverUser } : { name: "unknownUser" });
      }
      template.templateUsersData = template.templateUsersData || isc.DataSource.create({
        clientOnly: true,
        fields: [
          { name: "id", type: "text", primaryKey: true },
          { name: "type", type: "text" },
          { name: "name", type: "text" }
        ],
        cacheData: users,
        testData: users
      });

      var layout = isc.VLayout.create({
        width: "100%", height: 400, margin: 5, padding: 5, styleName: "popup-panel",autoDraw:false,
        members: [
          isc.VLayout.create({
            width: "100%", height: "100%",
            members: [
              isc.HLayout.create({
                width: "100%", height: 30,
                members: [
                  isc.Label.create({
                    contents: "inTemplate", height: 30, autoFit: true, wrap: false
                  })
                ]
              }),
              isc.ListGrid.create({
                width: "100%", height: "100%", selectionType: "multiple", //showHeader: false,
                canExpandRecords: true, canExpandMultipleRecords: true, getExpansionComponent: createTemplateUserExpansion.bind(this),
                dataSource: template.templateUsersData, autoFetchData: true
              })
            ]
          })
        ]
      })
      return layout;
    };

    loadUsers ();

createRoot(document.getElementById('root')).render()

[Hirn]

You are right, in your example the issue hardly ever occurs. And in my first example it also appeared only rarely. Apparently, when I recorded the video it was just a “lucky” case.
That’s why I prepared another example where the issue occurs consistently.

Please note that the problem happens only after the first selection inside the expanded inheritsGrid. Subsequent selections work correctly.

To run my example, you need to configure the paths to the ISC JS files in index.html:

<script type="text/javascript" src="shared/isomorphic/system/modules/ISC_Core.js"></script>
Sorry that I didn’t make the example in plain JavaScript. It would have taken too much time because the application turned out to be quite large.

I am also providing a video where you can see that the issue happens every time.

index.html.txt
index.js.txt
App.js.txt
EvolutionForm.js.txt
FlowTextListItem.js.txt
users.json.txt
templates.json.txt

[Isomorphic]

We tested your new sample code and were not able to reproduce the issue either.

Take into account the following:

1.- Your index.html loads the SmartClient runtime via <script> tags pointing to shared/isomorphic/... (ISC_Core.js, ISC_Forms.js, skin, etc.).
2.- Your React code, however, imports the React wrappers from smartclient-pro/react.

This suggests that the runtime you’re loading from shared/isomorphic/ may be older or modified, and therefore doesn’t match the React wrappers you’re importing from npm.

Please try running your sample without the <script> tags in index.html, using only the React wrappers from smartclient-pro/react. Let us know whether you can still reproduce the issue.

Regards
Isomorphic Software

[Hirn]

Please try running your sample without the <script> tags in index.html, using only the React wrappers from smartclient-pro/react and add
import 'smartclient-pro/release'; to App.js. Let us know whether you can still reproduce the issue.

I removed the import from index.html and added import 'smartclient-pro/release'; in App.js, but the issue still remains.
I would also like to remind you that the issue also occurs in SmartGWT.

[Isomorphic]

At this point, since the issue is totally unreproducible for us, we can't do any more work on this (we are already way past the normal criteria for working on a bug report).

Best guess is that this is only reproducible on one machine for some unusual reason - browser extension, project configuration you haven't shared, etc.

But there's simply nothing more we can do about it now.

[Hirn]

Best guess is that this is only reproducible on one machine for some unusual reason - browser extension, project configuration you haven't shared, etc.

Unfortunately, the issue occurs for dozens of users, and all of them have different computers and browser settings.
As I already mentioned above... I have found a solution to eliminate this issue. This works for us.

[Isomorphic]

If it's consistent across multiple client browsers for you, then the reason it's not reproducible over here is likely to be some kind of server side project configuration or third-party library.

Anyway, we're glad you have a way to "work around" it, even if we can't find any bugs.

[Hirn]

If it's consistent across multiple client browsers for you

As I already wrote in the first post, the issue occurs only in the Chrome browser. In all other browsers everything works correctly.

[Isomorphic]

We understand already: by multiple client browsers, we mean instances of Chrome on multiple different machines.

We have tried that, we do not get an error.

You have tried that, you get an error.

Therefore the difference is somewhere on the server.

We cannot do anything further because we have tried your exact code and we don't get an error.