fix(AnalyticalTable & FilterBar): fully support ui5-webcomponents scoping (#5537)

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -400,7 +400,7 @@ describe('AnalyticalTable', () => {
 
     // column filter + select
     cy.findByText('Name').click();
-    cy.get(`ui5-input[show-clear-icon]`).typeIntoUi5Input('Flowers Mcfarland', { force: true });
+    cy.get(`[ui5-input][show-clear-icon]`).typeIntoUi5Input('Flowers Mcfarland', { force: true });
     cy.findByText('Robin Moreno').should('not.exist', { timeout: 100 });
     cy.findByText('Judith Mathews').should('not.exist', { timeout: 100 });
     cy.findByText('Katy Bradshaw').should('not.exist', { timeout: 100 });
@@ -675,7 +675,7 @@ describe('AnalyticalTable', () => {
 
     cy.findByText('Friend Name').click();
     cy.findByText('Group').click();
-    cy.get('[aria-rowindex="7"] > [aria-colindex="3"] > [title="Expand Node"] > ui5-icon').click();
+    cy.get('[aria-rowindex="7"] > [aria-colindex="3"] > [title="Expand Node"] > [ui5-icon]').click();
 
     cy.findByText('25').click();
     cy.get('@onRowSelectSpy').should('have.callCount', 2);

packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts

@@ -1,5 +1,6 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
+import { getTagNameWithoutScopingSuffix } from '../../../internal/utils.js';
 import type { ReactTableHooks } from '../types/index.js';
 
 const getRowProps = (rowProps, { row, instance }) => {
@@ -9,7 +10,9 @@ const getRowProps = (rowProps, { row, instance }) => {
     if (
       e.target?.dataset?.name !== 'internal_selection_column' &&
       !(e.markerAllowTableRowSelection === true || e.nativeEvent?.markerAllowTableRowSelection === true) &&
-      webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has(e.target.tagName)
+      webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has(
+        getTagNameWithoutScopingSuffix(e.target.tagName)
+      )
     ) {
       return;
     }
@@ -59,7 +62,11 @@ const getRowProps = (rowProps, { row, instance }) => {
           (!e.target.hasAttribute('aria-expanded') || (e.shiftKey && e.code === 'Space')) &&
           (e.key === 'Enter' || e.code === 'Space')
         ) {
-          if (!webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has(e.target.tagName)) {
+          if (
+            !webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has(
+              getTagNameWithoutScopingSuffix(e.target.tagName)
+            )
+          ) {
             e.preventDefault();
           }
           handleRowSelect(e);

packages/main/src/components/FilterBar/FilterBar.cy.tsx

@@ -29,19 +29,19 @@ describe('FilterBar.cy.tsx', () => {
     );
 
     cy.findByText('Classification').should('be.visible');
-    cy.get('ui5-select').should('be.visible');
+    cy.get('[ui5-select]').should('be.visible');
 
     cy.findByText('Hide Filter Bar').click();
     cy.get('@toggleSpy').should('have.been.calledOnce');
 
     cy.findByText('Classification').should('not.be.visible');
-    cy.get('ui5-select').should('not.be.visible');
+    cy.get('[ui5-select]').should('not.be.visible');
 
     cy.findByText('Show Filter Bar').click();
     cy.get('@toggleSpy').should('have.been.calledTwice');
 
     cy.findByText('Classification').should('be.visible');
-    cy.get('ui5-select').should('be.visible');
+    cy.get('[ui5-select]').should('be.visible');
 
     cy.mount(
       <FilterBar onToggleFilters={toggle} hideToggleFiltersButton>
@@ -133,7 +133,7 @@ describe('FilterBar.cy.tsx', () => {
         cy.findByText('Show Values').click();
       }
 
-      const checkboxes = cy.get('ui5-checkbox');
+      const checkboxes = cy.get('[ui5-checkbox]');
       // hidden select-all checkbox is also counted
       checkboxes.should('have.length', 4);
 
@@ -244,7 +244,7 @@ describe('FilterBar.cy.tsx', () => {
     cy.findAllByText('SWITCH').should('have.length', 2);
     cy.findAllByText('SELECT').should('have.length', 1);
 
-    cy.findByPlaceholderText('Search for filters').shadow().find('ui5-icon').click();
+    cy.findByPlaceholderText('Search for filters').shadow().find('[ui5-icon]').click();
 
     cy.findAllByText('INPUT').should('have.length', 2);
     cy.findAllByText('SWITCH').should('have.length', 2);

packages/main/src/components/FilterBar/utils.tsx

@@ -1,5 +1,6 @@
 import type { Ref } from 'react';
 import { cloneElement } from 'react';
+import { getTagNameWithoutScopingSuffix } from '../../internal/utils.js';
 
 const inputTagNames = new Set([
   'UI5-COMBOBOX',
@@ -16,11 +17,13 @@ const inputTagNames = new Set([
 
 export const filterValue = (ref, child) => {
   const tagName = ref.tagName;
+  const tagNameWithoutSuffix = getTagNameWithoutScopingSuffix(tagName);
+
   let filterItemProps = {};
-  if (inputTagNames.has(tagName)) {
+  if (inputTagNames.has(tagNameWithoutSuffix)) {
     filterItemProps = { value: ref.value ?? '' };
   }
-  if (tagName === 'UI5-SELECT' || tagName === 'UI5-MULTI-COMBOBOX') {
+  if (tagNameWithoutSuffix === 'UI5-SELECT' || tagNameWithoutSuffix === 'UI5-MULTI-COMBOBOX') {
     const selectedIndices = Array.from(ref.children as HTMLCollectionOf<any>)
       .map((item, index) => (item.selected ? index : false))
       .filter((el) => el !== false);
@@ -33,7 +36,7 @@ export const filterValue = (ref, child) => {
     });
     filterItemProps = { children: options };
   }
-  if (tagName === 'UI5-SWITCH' || tagName === 'UI5-CHECKBOX') {
+  if (tagNameWithoutSuffix === 'UI5-SWITCH' || tagNameWithoutSuffix === 'UI5-CHECKBOX') {
     filterItemProps = { checked: ref.checked };
   }
   return filterItemProps;

packages/main/src/components/VariantManagement/VariantManagement.cy.tsx

@@ -469,7 +469,7 @@ describe('VariantManagement', () => {
           author
         } = props;
 
-        cy.get(`ui5-table-row[data-id="${rowId}"]`).as('row');
+        cy.get(`[ui5-table-row][data-id="${rowId}"]`).as('row');
         if (showOnlyFavorites) {
           if (labelReadOnly) {
             if (favorite || isDefault) {
@@ -480,18 +480,18 @@ describe('VariantManagement', () => {
           } else {
             if (favorite || isDefault) {
               cy.findAllByText(rowId).should('have.length', 1);
-              cy.get('@row').find('ui5-input').findShadowInput().should('have.value', rowId);
+              cy.get('@row').find('[ui5-input]').findShadowInput().should('have.value', rowId);
             } else {
               cy.findByText(rowId, { timeout: 100 }).should('not.exist');
-              cy.get('@row').find('ui5-input').findShadowInput().should('have.value', rowId);
+              cy.get('@row').find('[ui5-input]').findShadowInput().should('have.value', rowId);
             }
           }
         } else {
           if (labelReadOnly) {
             cy.findAllByText(rowId).should('have.length', 2);
           } else {
             cy.findAllByText(rowId).should('have.length', 1);
-            cy.get('@row').find('ui5-input').findShadowInput().should('have.value', rowId);
+            cy.get('@row').find('[ui5-input]').findShadowInput().should('have.value', rowId);
           }
         }
 

packages/main/src/internal/utils.ts

@@ -1,4 +1,8 @@
-import { getEffectiveScopingSuffixForTag, getScopedVarName } from '@ui5/webcomponents-base/dist/CustomElementsScope.js';
+import {
+  getCustomElementsScopingSuffix,
+  getEffectiveScopingSuffixForTag,
+  getScopedVarName
+} from '@ui5/webcomponents-base/dist/CustomElementsScope.js';
 import type { ReactNode } from 'react';
 import { Children, cloneElement, Fragment } from 'react';
 
@@ -46,3 +50,8 @@ export function trimAndRemoveSpaces(value) {
 }
 
 export const cssVarVersionInfoPrefix = getScopedVarName('--_ui5_').replace('--_ui5_', '');
+
+export function getTagNameWithoutScopingSuffix(tagName) {
+  const tagNameSuffix = getCustomElementsScopingSuffix();
+  return tagNameSuffix ? tagName.replace(`-${tagNameSuffix.toUpperCase()}`, '') : tagName;
+}