React-admin: FormDataConsumer not working properly inside 'Filter'

[afilp]

What you were expecting:

FormDataConsumer to be used in Filters, so that we can have a filter with subcat values filtered based on another filter with cat values.

What happened instead:
The filter does not appear correctly:

Other information:

      <FormDataConsumer>
        {({ formData, ...rest }) =>
          formData.cat_id && (
            <ReferenceInput
              // key={formData.cat_id}
              label="ΥΠΟΚΑΤΗΓΟΡΙΑ" 
              source="subCat_id"
              reference="subCategories"
              filter={{ cat_id: formData.cat_id }}
              {...rest}
            >
              <SelectInput optionText="name" />
            </ReferenceInput>
          )
        }
      </FormDataConsumer>

Environment

• React-admin version: v2.2

[afilp]

UPDATE: I removed the condition and also added a label to and it shows in the filters. However the filter prop has no effect, it just fetches all subcats regardless of the cat.id value.

      <FormDataConsumer>
        {({ formData, ...rest }) =>
          formData.cat_id && (
            <ReferenceInput
              // key={formData.cat_id}
              label="ΥΠΟΚΑΤΗΓΟΡΙΑ" 
              source="subCat_id"
              reference="subCategories"
              filter={{ cat_id: formData.cat_id }}
              {...rest}
            >
              <SelectInput optionText="name" />
            </ReferenceInput>
          )
        }
      </FormDataConsumer>

[djhi]

FormDataConsumer can only work in TabbedForm and SimpleForm currently as it specifically targets the redux-form named record-form. Marking this as an enhancement

[afilp]

@djhi That would be great to have as a feature, thanks a lot!

P.S. This can help a lot in a "wizard-like" filtering.

[fzaninotto]

I don't know what you mean by "wizard-like" filtering, but we've implemented a filter as tabs in the demo, see

https://github.com/marmelab/react-admin/blob/38d8030b4bdd1fbab51bcda148c34b76a9606b47/examples/demo/src/commands/CommandList.js#L56

[afilp]

@fzaninotto, I read the code there (thanks for the suggestion), I believe this is something different.

I would like a filter in filters whose appearance and values depend on another filter.

For example, I have categories and subCategories as filters:

• If the categories filter is not selected, the subCategories filter should disappear (it should not have any effect in the query, etc.).

• If the categories filter is selected, then the subCategories filter should be available for selection and its values should be filtered by the chosen category.

In other words, exactly like what formDataConsumer does (for appearance and filtered values of an input field), but inside the Filters logic.

So this is what I mean wizard-like, we can choose filters based on other filters.

Another example: Car brand and model (do not show all available models in the filter, but only show those related with the selected brand filter value).

There are many other such use cases (Date From/To, etc.).

Thanks!

[fzaninotto]

Gotcha.

You can probably do it using a custom wrapper for your input connected to the filter form in redux-form.

I'm not sure we'll implement that in core, because there are tons of corner cases. I believe this should stay in userland.

[fzaninotto]

Probably fixed by #2656

[dennes544]

Found solution to filter based on another filter without FormDataConsumer

<ReferenceInput source="filialid" reference="filials">
            <SelectInput optionText="filialname"/>
        </ReferenceInput>

        {props.filterValues.filialid &&
        <ReferenceInput
            key={props.filterValues.filialid}
            source="cabinetid"
            reference="cabinets"
            perPage={200}
            filter={{ filialid: props.filterValues.filialid }}
        >
            <SelectInput optionText="cabinetname"/>
        </ReferenceInput>}

Works like a charm

[amayatsky]

In case anyone cames in here wondering how to reset the dependent filter value, here is a solution:

<FormDataConsumer form={'filterForm'} alwaysOn source='stateId'>
      {({ formData, dispatch, ...rest }) => (
        <ReferenceInput
          resource={props.resource}
          source='stateId'
          reference='states'
          onChange={value => {
            dispatch(change('filterForm', 'districtId', null));
          }}
          allowEmpty>
          <SelectInput optionText='name' />
        </ReferenceInput>
      )}
    </FormDataConsumer>

    {(props.filterValues.stateId || props.filterValues.districtId) && (
      <ReferenceInput
        key={props.filterValues.stateId}
        source='districtId'
        reference='districts'
        filter={{ stateId: props.filterValues.stateId }}
        alwaysOn>
        <SelectInput optionText='name' />
      </ReferenceInput>
    )}