fix(StepIndicator): react on changes to is_current data property (#…

…2757) It looks like the StepIndicator does not react to changes in the `is_current` data property
dnbexperience · Oct 17, 2023 · b3a1a0f · b3a1a0f
1 parent 6e392f9
commit b3a1a0f
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 1 deletion.
diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorContext.tsx b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorContext.tsx
@@ -145,7 +145,7 @@ export function StepIndicatorProvider({
     const currentStepFromProps = getActiveStepFromProps()
 
     if (currentStepFromProps !== activeStep) {
-      setActiveStep(props.current_step)
+      setActiveStep(currentStepFromProps)
     }
   }, [props.current_step, data])
 

diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/StepIndicator.test.tsx b/packages/dnb-eufemia/src/components/step-indicator/__tests__/StepIndicator.test.tsx
@@ -414,6 +414,60 @@ describe('StepIndicator in loose mode', () => {
     ).toBeInTheDocument()
   })
 
+  it('should react on is_current data prop change', () => {
+    const TestComp = (props) => {
+      return (
+        <>
+          <StepIndicator.Sidebar sidebar_id="unique-id-loose-simulate" />
+          <StepIndicator
+            mode="loose"
+            sidebar_id="unique-id-loose-simulate"
+            {...props}
+          />
+        </>
+      )
+    }
+
+    const data1 = [
+      {
+        title: 'Step A',
+      },
+      {
+        title: 'Step B',
+      },
+      {
+        title: 'Step C',
+        is_current: true,
+      },
+    ]
+
+    const { rerender } = render(<TestComp data={data1} />)
+    expect(
+      document.querySelector('li.dnb-step-indicator__item--current')
+        .textContent
+    ).toContain('3.Step CSteg 3 av 3')
+
+    const data2 = [
+      {
+        title: 'Step A',
+      },
+      {
+        title: 'Step B',
+        is_current: true,
+      },
+      {
+        title: 'Step C',
+      },
+    ]
+
+    rerender(<TestComp data={data2} />)
+
+    expect(
+      document.querySelector('li.dnb-step-indicator__item--current')
+        .textContent
+    ).toContain('2.Step BSteg 2 av 3')
+  })
+
   it('should react on current_step prop change', () => {
     const TestComp = ({ id, ...props }) => {
       return (