TreeWidget: UI issues on mobile

[ValdasSorys]

Issues found while trying to update to "@itwin/tree-widget-react": "3.2.4" (previously version 2.3.4 was used) on a touchscreen device (Android/iOS):

1. Most of the time need to press multiple times to expand/show/hide node. Video:

Simulator.Screen.Recording.-.14.Pro.16.4.-.2025-01-27.at.13.07.43.mp4

2. Scrolling becomes broken after opening some nodes. Video:

Simulator.Screen.Recording.-.14.Pro.16.4.-.2025-01-27.at.13.09.46.mp4

3. “Please provide additional filtering…” message doesn’t fit (also it becomes possible to scroll horizontally (shouldn’t happen), message is cut off even if scrolled horizontally):

4. Filtering UI doesn't fit:

Code for the tree from our side:

interface CustomModelsTreeProps {
  viewport: Viewport;
  selectionStorage: SelectionStorage;
  imodel: IModelConnection;
}
function CustomModelsTreeComponent({ viewport, selectionStorage, imodel }: CustomModelsTreeProps) {
  const { modelsTreeProps, rendererProps } = useModelsTree({
    activeView: viewport, hierarchyConfig: {
      elementClassGrouping: "enable",
    },
    selectionPredicate: ({ type }) => type === "element",
  });

  return (
    <VisibilityTree
      {...modelsTreeProps}
      selectionMode="multiple"
      density="enlarged"
      getSchemaContext={getSchemaContext}
      selectionStorage={selectionStorage}
      imodel={imodel}
      treeRenderer={(props) => <VisibilityTreeRenderer {...props} {...rendererProps} />}
    />
  );
}

[grigasp]

Thanks. I split this into 4 different issues, as they'll need to be investigated individually.

[ValdasSorys]

@grigasp I looked in a bit more and issues 2. and 3. can only be reproduced on iOS (not reproduced on Android, where same web code is used). Also, not sure if related but this error seems to be spammed when scroll glitches out on iOS (issue 2.) Error: Invalid value for <svg> attribute height="1rem".

[ValdasSorys]

Also any idea when the fixes would be released??

[grigasp]

Also any idea when the fixes would be released??

Didn't get a chance to look into them yet. I hope someone on the team will have time to do that next week. The time it'll take us to fix this will depend on what we find...

• Issues 1-2 likely come from our underlying iTwinUI Tree component. Need to investigate to confirm, but either way they seem like small fixes.
• 3rd issue is interesting... You mention it's only reproducible on iOS. Can you post a screenshot showing how it looks like on Android?
• 4th issue will require significant work to make the dialog render nicely on small screens. I guess one thing you could do is set filterButtonsVisibility to hide (see https://github.com/iTwin/presentation/blob/master/packages/hierarchies-react/CHANGELOG.md#150) when rendering nodes. That would hide the filtering capability from users for the most part.

[ValdasSorys]

Sorry, I used incorrect numbers for issues. Issues 1 (needing to click multiple times) and 2 (scrolling glitching out) can only be reproduced on iOS. Issues 3 (the message not fitting) and 4 (filtering ui not fitting) can be reproduced on both iOS and Android.

[grigasp]

Sorry, I used incorrect numbers for issues. Issues 1 (needing to click multiple times) and 2 (scrolling glitching out) can only be reproduced on iOS. Issues 3 (the message not fitting) and 4 (filtering ui not fitting) can be reproduced on both iOS and Android.

Okay. So I think we can pretty quickly fix 1-2. 4th will take time (I'd say end of Q1 at best). 3rd needs discussion, I'll ping you on #1158

[ValdasSorys]

I couldn't find where to apply filterButtonsVisibility (also would it be possible to completely disable the filtering UI, even from the message that appears when elements don't fit?).

Also we are trying to implement custom tree header (hideable/different UI), but can't implement focus mode as it isn't accessible when not using ModelsTreeComponent (could needed stuff be exported?).

[grigasp]

I couldn't find where to apply filterButtonsVisibility

Yeah, it looks like it's not exposed through tree widget APIs. Which top-level tree widget components are you rendering in your app?

also would it be possible to completely disable the filtering UI, even from the message that appears when elements don't fit?

That would basically make it impossible for users to get to their data. So I don't think we want to allow that.

Also we are trying to implement custom tree header (hideable/different UI), but can't implement focus mode as it isn't accessible when not using ModelsTreeComponent (could needed stuff be exported?).

It is accessible through ModelsTreeComponent.ToggleInstancesFocusButton, isn't it?

[ValdasSorys]

I am using VisibilityTree (treeRenderer - VisibilityTreeRenderer). From my testing seems like ModelsTreeComponent.ToggleInstancesFocusButton only works when using ModelsTreeComponent (not VisibilityTree).

[grigasp]

I am using VisibilityTree (treeRenderer - VisibilityTreeRenderer).

#1174

From my testing seems like ModelsTreeComponent.ToggleInstancesFocusButton only works when using ModelsTreeComponent (not VisibilityTree).

#1173