[2469] Fix an issue that occurs when navigating from a reference widg…

…et to a filtered item in the explorer Bug: #2469 Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>
eclipse-sirius · Oct 17, 2023 · cf1be06 · cf1be06
1 parent 63750b4
commit cf1be06
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -35,6 +35,7 @@ For example, Diagram & Form domains are not root domains because `DiagramDescrip
 - https://github.com/eclipse-sirius/sirius-web/issues/2456[#2456] [form] Fix an issue that prevents creation of new object on mono valued and containment reference when a value is already set with the reference widget.
 - https://github.com/eclipse-sirius/sirius-web/issues/2269[#2269] [view] Fix an issue where it was possible to create a DiagramDescription or a FormDescription as a root object of a resource.
 - https://github.com/eclipse-sirius/sirius-web/issues/2470[#2470] [form] Fix an issue that prevents the removal of a contained reference from the reference widget.
+- https://github.com/eclipse-sirius/sirius-web/issues/2469[#2469] [form] Fix an issue that occurs when navigating from a reference widget to a filtered item in the explorer.
 
 === New Features
 

diff --git a/integration-tests/cypress/e2e/project/edit/widget-reference.cy.js b/integration-tests/cypress/e2e/project/edit/widget-reference.cy.js
@@ -503,4 +503,33 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => {
     cy.getByTestId('reference-value-Test').should('not.exist');
     cy.getByTestId('reference-value-').should('exist');
   });
+
+  it.only('check widget reference click navigation to filter tree item', () => {
+    cy.createProjectFromTemplate('studio-template').then((res) => {
+      const projectId = res.body.data.createProjectFromTemplate.project.id;
+      cy.visit(`/projects/${projectId}/edit`);
+    });
+    cy.getByTestId('DomainNewModel').dblclick();
+
+    cy.get('[title="domain::Domain"]').then(($div) => {
+      cy.wrap($div.data().testid).as('domainValue');
+    });
+    cy.get('@domainValue').then((domainValue) => {
+      cy.getByTestId(`${domainValue}`).dblclick();
+    });
+    cy.getByTestId('Entity1').dblclick();
+    cy.getByTestId('Entity2').dblclick();
+    cy.getByTestId('linkedTo').click();
+    cy.getByTestId('reference-value-Entity2').should('exist');
+
+    cy.getByTestId('linkedTo').type('{ctrl+f}');
+    cy.getByTestId('filterbar-textfield').type('Entity1');
+    cy.getByTestId('filterbar-filter-button').click();
+    cy.getByTestId('Entity2').should('not.exist');
+
+    cy.getByTestId('reference-value-Entity2').click();
+    cy.getByTestId('page-tab-Entity2').should('exist');
+    cy.getByTestId('filterbar-close-button').click();
+    cy.getByTestId('selected').findByTestId('Entity2').should('exist');
+  });
 });
diff --git a/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItem.tsx b/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItem.tsx
@@ -18,18 +18,18 @@ import {
   ServerContextValue,
 } from '@eclipse-sirius/sirius-components-core';
 import IconButton from '@material-ui/core/IconButton';
-import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
 import CropDinIcon from '@material-ui/icons/CropDin';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import UnfoldMoreIcon from '@material-ui/icons/UnfoldMore';
 import React, { useContext, useEffect, useRef, useState } from 'react';
+import { isFilterCandidate, splitText } from './filterTreeItem';
 import { TreeItemProps } from './TreeItem.types';
 import { TreeItemArrow } from './TreeItemArrow';
 import { TreeItemContextMenu, TreeItemContextMenuContext } from './TreeItemContextMenu';
 import { TreeItemContextMenuContextValue } from './TreeItemContextMenu.types';
 import { TreeItemDirectEditInput } from './TreeItemDirectEditInput';
-import { isFilterCandidate, splitText } from './filterTreeItem';
 
 const useTreeItemStyle = makeStyles((theme) => ({
   treeItem: {
@@ -265,11 +265,11 @@ export const TreeItem = ({
   }
   useEffect(() => {
     if (selected) {
-      if (refDom.current.scrollIntoViewIfNeeded) {
+      if (refDom.current?.scrollIntoViewIfNeeded) {
         refDom.current.scrollIntoViewIfNeeded(true);
       } else {
         // Fallback for browsers not supporting the non-standard `scrollIntoViewIfNeeded`
-        refDom.current.scrollIntoView({ behavior: 'smooth' });
+        refDom.current?.scrollIntoView({ behavior: 'smooth' });
       }
     }
   }, [selected]);