React-admin: Value not cleared in the Redux store when hiding the input component

Created on 5 Jun 2019  路  5Comments  路  Source: marmelab/react-admin

What you were expecting:

When hiding a field the value will be cleared

What happened instead:

The value is not cleared and is still present when submitting the form.

Steps to reproduce:

https://marmelab.com/react-admin/Inputs.html#hiding-inputs-based-on-other-inputs

Enter a value, disable the field by unchecking the boolean and the value will not be cleared.

Related code:

From the docs:

import { FormDataConsumer } from 'react-admin';

 const PostEdit = (props) => (
     <Edit {...props}>
         <SimpleForm>
             <BooleanInput source="hasEmail" />
             <FormDataConsumer>
                 {({ formData, ...rest }) => formData.hasEmail &&
                      <TextInput source="email" {...rest} />
                 }
             </FormDataConsumer>
         </SimpleForm>
     </Edit>
 );

Environment

  • React-admin version: 2.9.1
  • Last version that did not exhibit the issue (if applicable): N/A
  • React version: 16.8.6
  • Browser: Chrome 74.0.3729.169
  • Stack trace (in case of a JS error): N/A
bug

All 5 comments

Ah! It will be difficult to fix.

As a workaround, it's possible to listen for the hasEmail field change with a custom saga, and manually remove the value of the email field in the Redux store.

EDIT: A solution would be to know, when submitting, which fields are present and only submit these fields.

@Kmaschta I agree with your edit. Usability wise it's nice to keep the value until submitting because you might change your mind or mis-click.

I will write a custom saga for now. Thanks!

I don't think it's a bug actually - both behaviors can be desired.

As it's a corner case and it can be fixed in userland, I'm closing this issue.

thanks for reporting it anyway!

I understand. I'll make a plugin for it. Could you help me with clearing a field? How would that be written?

Cool, I would love to help you with that!
But let's have this discussion eslewhere. Feel free to ping on any issue on GitHub or on Stack Overflow : @kmaschta

Tip : We use redux-form to manage Create and Edit forms. So, it might be useful to dispatch a redux form action from this library.

Was this page helpful?
0 / 5 - 0 ratings