FilterGroupItem: prevent side effect

Author: Lukas742

packages/charts/src/internal/ChartContainer.tsx

@@ -8,7 +8,6 @@ import { Component, forwardRef } from 'react';
 import { ResponsiveContainer } from 'recharts';
 import { classNames, styleData } from './ChartContainer.module.css.js';
 
-//todo: add feature request for parts or even a fix if this turns out to be a bug
 addCustomCSSWithScoping(
   'ui5-busy-indicator',
   `

packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx

@@ -52,7 +52,6 @@ export const Expandable = (props: CellInstance) => {
   return (
     <>
       {columnIndex === 0 && (
-        // todo rowProps should be applied to the whole row, not just the cell. We should consider refactoring this.
         <>
           {row.canExpand || subComponentExpandable ? (
             <span

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

@@ -106,7 +106,6 @@ const useGetTableProps = (
       if (
         dataset.emptyRowCell === 'true' ||
         Object.prototype.hasOwnProperty.call(dataset, 'subcomponentActiveElement') ||
-        // todo: with the new popover API of ui5wc this might not be necessary anymore
         dataset.componentName === 'ATHeaderPopoverList' ||
         dataset.componentName === 'ATHeaderPopover' ||
         dataset.componentName === 'AnalyticalTableNoDataContainer'

packages/main/src/components/FilterGroupItem/index.tsx

@@ -10,7 +10,7 @@ import moveDownIcon from '@ui5/webcomponents-icons/dist/navigation-down-arrow.js
 import moveUpIcon from '@ui5/webcomponents-icons/dist/navigation-up-arrow.js';
 import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import { forwardRef, useContext, useEffect, useRef, useState } from 'react';
+import { forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { FlexBoxAlignItems } from '../../enums/FlexBoxAlignItems.js';
 import { FlexBoxDirection } from '../../enums/FlexBoxDirection.js';
 import { FlexBoxJustifyContent } from '../../enums/FlexBoxJustifyContent.js';
@@ -93,7 +93,21 @@ const FilterGroupItem = forwardRef<HTMLDivElement, FilterGroupItemPropTypes & Fi
 
     const inFB = !isFilterInDialog;
     const withReordering = enableReordering && !withValues && isListView;
-    const [itemPosition, setItemPosition] = useState<undefined | 'last' | 'first'>(undefined);
+    const initialPosition = useMemo(() => {
+      if (index === 0) {
+        return 'first';
+      }
+      if (index === filtersCount - 1) {
+        return 'last';
+      }
+      return undefined;
+    }, [index, filtersCount]);
+
+    const [itemPosition, setItemPosition] = useState<undefined | 'last' | 'first'>(initialPosition);
+
+    useEffect(() => {
+      setItemPosition(initialPosition);
+    }, [initialPosition]);
 
     const handleFocus = (e) => {
       setShowBtnsOnHover(false);
@@ -106,17 +120,6 @@ const FilterGroupItem = forwardRef<HTMLDivElement, FilterGroupItemPropTypes & Fi
       }
     };
 
-    useEffect(() => {
-      if (index === 0) {
-        // Todo: check this
-        // eslint-disable-next-line react-hooks/set-state-in-effect
-        setItemPosition('first');
-      }
-      if (index === filtersCount - 1) {
-        setItemPosition('last');
-      }
-    }, [index, filtersCount]);
-
     const handleReorder = (e: Parameters<ButtonPropTypes['onClick']>[0]) => {
       setItemPosition(undefined);
       onReorder({