Steps: Component error with Tailwind

[mikgross]

Describe the bug

Implementation

import { Steps, StepsSelectEvent } from "primereact/steps";
import { MenuItem } from "primereact/menuitem";

const items: MenuItem[] = [
    { label: "Step 1", icon: "pi pi-user" },
    { label: "Step 2", icon: "pi pi-user" },
    { label: "Step 3", icon: "pi pi-user" },
  ];

 <div className="card">
            <Steps
              unstyled
              pt={{}}
              readOnly
              model={items}
              activeIndex={0}
              onSelect={(event: StepsSelectEvent) => console.log(event)}
            />
</div>

Reproducer

No response

System Information

System:
    OS: macOS 15.4.1
    CPU: (8) arm64 Apple M1
    Memory: 143.19 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.1 - ~/.nvm/versions/node/v22.13.1/bin/node
    Yarn: 1.22.22 - ~/.yarn/bin/yarn
    npm: 11.4.0 - ~/.nvm/versions/node/v22.13.1/bin/npm
    pnpm: 10.5.2 - ~/.nvm/versions/node/v22.13.1/bin/pnpm
    Watchman: 2024.08.05.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 137.0.7151.55
    Safari: 18.4
  npmPackages:
    primereact: ^10.9.5 => 10.9.5 
    react: 19.1.0 => 19.1.0 
    tailwindcss: ^3.3.2 => 3.3.2

Steps to reproduce the behavior

Simply using Steps

Expected behavior

No response

[melloware]

@mikgross can't reproduce can you tweak my reproducer to show the issue: https://stackblitz.com/edit/vitejs-vite-kdmpywp5?file=src%2FApp.tsx

[github-actions[bot]]

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[mikgross]

I couldn't reproduce via your stackblitz, which got me researching a bit more the root cause. In the error stack I see this:

And in the specified file this piece of code is failing:

label: function label(_ref113) {
      var parent = _ref113.parent,
        context = _ref113.context;
      return {
        className: classNames('block', 'whitespace-nowrap overflow-hidden overflow-ellipsis max-w-full', 'mt-2 text-gray-500 dark:text-white/60', {
          'font-normal': parent.state.activeIndex !== context.index,
          // unselected item.
          'font-bold': parent.state.activeIndex === context.index,
          // Selected item.
          'text-gray-500/60': context.disabled
        })
      };
    }

specifically this line: 'font-normal': parent.state.activeIndex !== context.index, Apparently 'parent' here is undefined when rendering Steps.

I believe it might have to do with tailwind?

[mikgross]

Ok I have reproduced a bare minimum repo here: https://github.com/mikgross/repro-primereact-steps Let me know if that's still failing for you..

[melloware]

Confirmed this is a bug. The Passthrough looks all wrong for this component...