Null value for NullableBooleanInput doesn't work

[mihaildu]

Issue originally reported here #4299 (comment)

What you were expecting:
Value null for NullableBooleanInput to show what I have in translation for ra.boolean.null.

What happened instead:
It doesn't show anything.

Steps to reproduce:
Go here https://codesandbox.io/s/nifty-snowflake-mcf9e
Click on jane. Notice there is nothing for null even if translation should say Unknown.

I mentioned a workaround for this in my previous comment, replacing the '' to ' ' (a whitespace) both in MenuItem and getStringFromBoolean in NullableBooleanInput.tsx seems to works.

[fzaninotto]

Thanks for the issue and the CodeSandbox, I managed to reproduce and confirm the problem.

Material-ui's Select component doesn't display the empty option by default (see https://codesandbox.io/s/beautiful-raman-y479j). If you want to see the empty option, you must set the displayEmpty option to true in the SelectProps. And then, the problem is that the empty option overlaps the label, so you must pass the shrink prop to true in the InputLabelProps.

That means you can fix this problem in user land by passing the following options to NullableBoolanInput:

<NullableBooleanInput
    source="foo"
    options={{ 
        SelectProps: { displayEmpty: true },
        InputLabelProps: { shrink: true }
    }}
/>

However, we can't do that in react-admin. Setting these props by default on NullableBooleanInput gives a bad result, because the default translation for the empty option is '', so the null value would render as:

Which compares to the current version, where the empty value isn't displayed and the label not minimized:

So we can't change the code, but we must change the documentation to explain how to do if you want to display the empty value.

Marking this as a documentation problem.

[fzaninotto]

Fixed by #4365