How to check is the field visible?

[hovercraft-github]

Hi guys,

First of all, thank you for this great work!

I have a question: in my resolveProps function I need a way to detect whether particular field is visible or not,
but it seems that there is no relevant property seen via formOptions.getFieldState or via props argument?
At least the hideField property is not shown here.

[rvsia]

Hello, thank you!

hideField is omitted before it’s passed to the component so it’s not shown in the resolveProps. We could prepare a simple fix for it, but it would create warnings for components that are not using useFieldApi and spread props to some html element.

However, hideField and resolveProps are both set in the schema, so you have an access to the value and you can pass it to the function by yourself:

const resolveProps = (hideField) => (props, field, formOptions) => ...


{
  component: ...,
  name: ...,
  hideField: true,
  resolveProps: resolveProps(true)
}

[hovercraft-github]

Yes, I can get hideField via schema, but it's a static property.
What I actually want is to be able detecting current visibility of a field which in turn may be changed via 'condition' expression.
E.g. suppose my field is defined as follows in the schema:
{ name: 'myfield', label: 'Foo is Bar!', component: 'text-field', condition: { when: 'other-field', isNotEmpty: true } }
It then will be occasionally shown or hidden depending on the 'other-field' value.

Is it possible to detect programmatically is the 'myfield' shown or hidden in its resolveProps function or some other code?

Also it would be nice to have ability to show or hide the field using only code in resolveProps instead of having 'condition' property.

[rvsia]

If the field is hidden via condition, then it's simple - the field is not renderer at all, so in resolveProps (as they are computed only for rendered fields) it would be always true.

You can implement ability to hide fields via resolveProps by yourself as a component prop (for example, some inputs can work with type: hidden) but it would be a little bit different as the field would be just hidden in DOM, but not in virtual DOM (so still registered.)

[hovercraft-github]

Ok, thank you for suggestions - I'll give it a try :)

[Hyperkid123]

@hovercraft-github Let's circle back a bit. From what I understand (and I may have misunderstood completely) you are looking for a way to tell if a field has been added/removed from a virtual DOM via the condition. For example:

[{
  name: 'field-a',  
}, {
  name: 'field-b',
  condition: {
    when: 'field-a',
    is: 'x'
  }
}]

So you want to know when field-b got hidden and do something in field-a. Is that correct? If so there are ways how to achieve it, however it will require some component customization.

[hovercraft-github]

Yep, you understand my case correctly!

[Hyperkid123]

Then the only way is to use custom components. You can't really check something that does not exist. But we know that condition wrapped component trigges mount/unmount lifecycle. If it was up to me, i would create new HOC and add useEffect from which I would do the necessary changes. Like so:

const componentDecorator = (Component) => (props) => {
 const formApi = useFormApi();
 useEffect(() => {
   // do something on mount
   formApi...
   return () => {
     // do something on unmount
     formApi...
   }
 }, [])
  return <Component {...props} />
}

...

const customComponentMapper = Object.entries(componentMapper).reduce((acc, [key, Component]) => ({...acc, componentDecorator(Component)}), {})

Forgive any code errors, I am writing this in a hurry.

If you want I can prepare a code sandbox example later.