React-admin: BooleanInput parse and format props don't seem to work

[amhouel]

What you were expecting:

Have the parse and format functions transform our record non-boolean values to boolean values for the input and vice-versa and see the BooleanInput toggle work accordingly on click.

What happened instead:

The BooleanInput is always set to true and doesn't change on click.
If the initial value is a true value, the parse and format functions successfully change the value to the false value on the 1st click but then get stuck on that value.
If the initial value is a false value, then the parse and format functions always return that same false value.

Steps to reproduce:

In the Posts list, click on any Edit button and inside the Edit form click on the "Title" BooleanInput.

Related code:

https://codesandbox.io/s/serverless-pine-dhgem

Environment

• React-admin version: 3.2.1
• Last version that did not exhibit the issue (if applicable): 2.9.9
• React version: 16.9
• Browser: Chrome
• Stack trace (in case of a JS error):

[fzaninotto]

The format and parse functions are well called when I try this code:

        <BooleanInput
          source="title"
          format={v => {console.log('format', v);return v}}
          parse={v =>{console.log('parse', v);return v}}
        />

So in my opinion, the problem is either on your side or in the final-form side.

[jparkrr]

(I'm working with @amhouel)

Yes, you're right. It looks like react-final-form doesn't support format for checkboxes

We can probably close this and we'll report it upstream or work around it on our side.

Thanks!

[fzaninotto]

Thanks for looking into it. I'm closing this issue.

[pefi1011]

Hi @jparkrr @amhouel how did you solve this? I have the same requirement: transform non-boolean record (array of strings) to boolean values for the input and vice-versa and see the BooleanInput toggle work accordingly on click.

I have tried parse/format as @fzaninotto mentioned, but in the logs I see do not see parse logs. The app crashes with Error: Cannot set a numeric property on an object before the parse function is executed

Any ideas/hints are highly appreciated 🤗

[kopax]

I have the same issue with BooleanInput, despite i am turning the value to a boolean (without parse/format, instead I created a custom component that wrap BooleanInput) the "false" string converted to false get rendered as true.

[armellarcier]

I found a workaround using FormDataConsumer to override the <Switch /> component's checked prop. You can use it like this :

<FormattedBooleanInput
    format={(value) => value === "Y"}
    parse={(value) => (value ? "Y" : "N")}
    source="myfield"
/>

import React from "react";
import { FormDataConsumer, BooleanInput } from "react-admin";

const FormattedBooleanInput = ({
    format,
    parse,
    source,
    options,
    ...props
}) => (
    <FormDataConsumer>
        {({ formData }) => (
            <BooleanInput
                options={{
                    checked: format(formData[source]),
                    ...options,
                }}
                format={format}
                parse={parse}
                source={source}
                {...props}
            />
        )}
    </FormDataConsumer>
);

FormattedBooleanInput.defaultProps = {
    options: {},
};

export default FormattedBooleanInput;