Stepper: Inactive steps removed from DOM

[jerlam06]

Describe the bug

In the stepper, as well as many other components whose purpose is to hide/show content (accordion for instance), the hidden content is not simply hidden but also removed from the DOM. I don't see the logic in this decision, because in most use cases where any form of data persistence is required, these components cannot be used.

Similar issue here: #6543

Reproducer

No response

PrimeReact version

10.6.6

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

Stepper and other components whose purpose is to hide/show content should not remove content from the DOM, but simply hide it, in order to make these components usable 100% of the time.

[melloware]

@jerlam06 PR's are welcome!

[sja-cslab]

@melloware that is not a bug.

Thats what I expect of a React Component. Lift the states up and the problem is gone.

Things mentioned in #6543 sound correct however you've to see the negative aspects of it.
What if one has used Tabs with Datatables in it and those got thousand of entries?
That would be a massive Dom-grow after update and could even break things.

In #6543 the OP talks about validation in an Accordion within a form - I see what he is talking about but using a form outside of a complex component like accordion or tabview is nearly always a bad idea.

I've learned "never submit something, a user can not see".
Sure in case of Stepper, which works like a wizard, its something else. However pass the data to parent.

Lets take a login/forget password example. Which is within a TabView.
I click on "reset password" and fill that inputs half the way down till I have the "ah yes thats my password" - moment.
So I go back to login part and fill in my stuff.

Sure using same request on that kind of thing is not good however - would you pass login + half thing of the other tab?
Would you dynamically change the url of that form?

Edit:
In PrimeVue and in PrimeNG the Dom is conditional rendered too. So same exact behavior.

@jerlam06 You should add a Stackblitz so we can see what exactly gives you hadache.

[melloware]

Changed to "Discussion". My preference is to always remove unused things from the DOM and not just hide them.

[jerlam06]

@sja-cslab Lifting the states up for the sake of adapting to the component library doesn't make sense. I have a complex page where each steps has dozens of states (table data, graph data...etc), so you are asking me to lift all these states up and have 50 states in the parent component ONLY because react says so and because the component library I am using is so opinionated that cannot even break my page into several smaller components with their own logics.
I understand your point, but there are many use cases in the world of web development (not only login pages), when you develop a saas with complex data representation you can't just "lift the states up" or you end up with an unmaintainable code base.

My point is: other people and I, have the need to being able to keep the content of some components within the DOM, I understand that most people don't need it, but some people do. So the solution would be to make it possible via a props.

[sja-cslab]

@jerlam06 We're using prime too for very complex data holding and configuration of smart automation devices and we did not have a single problem with any kind of data hold.

I totally see your point however

ONLY because react says so [...]

Thats the point. Exactly because it is recommended, you wont find any larger FE lib that will do it in another way if it is not really required.
As you say, the most people can use it the way it is. Lets say "the most" are 80% - the question here is how complex is it to change the current functionality and how many people will really use it.

when you develop a saas with complex data representation you can't just "lift the states up" or you end up with an unmaintainable code base.

I disagree with that. As I said we're using it exactly that way and our code is clean. (not always of course but I try to keep an eye on it)

However you dont have to lift hundreds of states up, thats not the intention of it.
If you use Stepper, what this issue is about, how many Steps are you using?

Lets say 5 just as an example.
So you will have the Stepper + 5 Components. What I would expect then is either one of the following:

1: the Component that holds the Stepper got all data required in any sub-component.
2: any data shifting between the previous and/or next step (depending on the flow back/forth)
That means something like parent (states of step1) => step 1 (states of step2)... something like that, i hope you understand what i mean

[sja-cslab]

You should not forget, that PrimeReact is an FE library and nothing like Redux for any kind of explicit data transportation.
In such an FE library it's your own thing to get the Data in whatever way. If your data is as complex as you say, start combining PrimeReact with Redux or any other lib. Or build your own layer as context matching your needs.

Please dont get me wrong with any of it @jerlam06 I definitely see your legit point.

@melloware I always respect your thoughts about a complex thing like this one. I would appreciate to hear your opinion and how you handle such cases in your projects