How to add a filter input based on another filter input on react-admin?

Question

I'm using on react-admin and try to add a filter options to a list.

My problem is how to add a filter input based on another filter input?

I want to filter the list by organization and by project bu project is associated to an organization so I want to enable select a project only after organization is selected and and only of projects associated tothe selected organization.

That is waht I try to do:

 const ProjectInputs = () => {
    const { values } = useFormState();
    const translate = useTranslate();
    const classes = useStyles();

    return (

        <ReferenceInput
            label={translate("resources.projects.name", { smart_count: 1 })}
            source="projectId"
            reference="projects"
            filter={{ organizationId: values.organizationId }}
            disabled={!values.organizationId}
            alwaysOn
            variant="standard"
        >
            <SelectInput
                optionText="name"
                resettable
                alwaysOn
            />

        </ReferenceInput>

    );
}

export const Paymentilter: FC<Omit<FilterProps, 'children'>> = props => {
const classes = useFilterStyles();
return (
    <Filter {...props}>

        <ReferenceInput
            source="organizationId"
            reference="organizations"
            variant="standard"
        >
            <AutocompleteInput
                optionText={(choice?: Organization) =>
                    choice?.id // the empty choice is { id: '' }
                        ? `${choice.name}`
                        : ''
                }

            />
        </ReferenceInput>

        <ProjectInputs />
    </Filter>
);

};

It works but there are some problems:

I cant define the project input to be always on.
In the add filter button there is no name for this input only blank shrink space.
The position of the project input is unordered input is popping up.
after choosing this filter I cant close it.

Do you have an idea for me?

How to fix my problems?

Sholud I solve my issue in another way?

Thank you!

EDIT:

I did like @doctoragon way, and that is ok. in this way the project input cant be choosen from the add filter button only when we choose an organization it apears and when we cancel it disaper.

That ok for me but the second input still looks different as you can see on the picture it is upper then al the others inputs, and the cancel button is overirded by the chosen option.

John McCabe · Accepted Answer · 2021-06-23 13:49:44Z

1

You might be able to solve this using a FormDataConsumer inside your Filter.

<Filter {...props}>
  <ReferenceInput source="organizationId" ... />
  <FormDataConsumer source="projects" alwaysOn>
    {
      ({ formData, ...restOfTheProps }) => organizationId &&  <ProjectInputs />
    }
  </FormDataConsumer>
</Filter>

edited Jun 23, 2021 at 13:49

answered Jun 15, 2021 at 19:57

John McCabe

7221 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

R H Over a year ago

Thank you, that works but only the apearnce not well, I edited the questiion and add screenshot to explain the problem –

John McCabe Over a year ago

Try adding a source prop to your FormDataConsumer.

Collectives™ on Stack Overflow

How to add a filter input based on another filter input on react-admin?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related