Delete HTML element on "HIDE" rule


I’m trying to use the “Rules” API in order to hide an input when another input changes to a certain value.
The thing is the Hide / Show api works only visibly but the actual HTML element containing the element to Hide or Show is still there and therefore the css classes still apply.

For a display inline of 3 inputs for example, if I hide one of them with the HIDE / SHOW api, they will still be aligned as if there still were 3 elements when we can only see 2.

How can I actually hide the whole HTML container please ?


Hi @Perion,

I’m assuming you are using React Vanilla. There we implemented to set hidden whenever a SHOW/HIDE rule applies.

You can customize this via custom renderers. In this case you can basically reuse the existing renderers as they are and just not render them when visible === false.

Hi @sdirix,
Thanks for your answer.

I do not use React Vanila, I use React with Material UI and I do not change its native css.
I was just trying to describe how the actual component view was.

I tried anyway to use the hidden attribute with the visible prop to my input’s wrapper, which in my case is FormControl from @mui/material, and it did not hide it.

I will try to figure out something with custom renderers.

Thank you.