Display null label in NullableBooleanInput

marmelab · Jan 28, 2020 · 582e28a · 582e28a
1 parent 2a409ac
commit 582e28a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/docs/Inputs.md b/docs/Inputs.md
@@ -384,6 +384,27 @@ import { NullableBooleanInput } from 'react-admin';
 
 ![NullableBooleanInput](./img/nullable-boolean-input.png)
 
+`<NullableBooleanInput />` doesn't display the empty option by default. If you want to customize its label and display it, you can use the `displayNull` prop.
+
+```jsx
+import { NullableBooleanInput } from 'react-admin';
+
+<NullableBooleanInput 
+    label="Commentable"
+    source="commentable"
+    displayNull
+/>
+```
+
+```jsx
+import englishMessages from 'ra-language-english';
+
+englishMessages.ra.boolean.null = 'Null label';
+```
+
+![NullableBooleanInput](./img/nullable-boolean-input-null-label.png)
+
+
 `<BooleanInput>` and `<NullableBooleanInput>` also accepts the [common input props](./Inputs.md#common-input-props).
 
 ## `<CheckboxGroupInput>`

diff --git a/docs/img/nullable-boolean-input-null-label.png b/docs/img/nullable-boolean-input-null-label.png
diff --git a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx
@@ -40,6 +40,7 @@ const NullableBooleanInput: FunctionComponent<
     onChange,
     onFocus,
     options,
+    displayNull,
     parse = getBooleanFromString,
     resource,
     source,
@@ -65,6 +66,21 @@ const NullableBooleanInput: FunctionComponent<
         source,
         validate,
     });
+
+    const enhancedOptions = displayNull
+        ? {
+              ...options,
+              SelectProps: {
+                  ...(options && options.SelectProps),
+                  displayEmpty: true,
+              },
+              InputLabelProps: {
+                  ...(options && options.InputLabelProps),
+                  shrink: true,
+              },
+          }
+        : { ...options };
+
     return (
         <TextField
             id={id}
@@ -91,7 +107,7 @@ const NullableBooleanInput: FunctionComponent<
             }
             className={classnames(classes.input, className)}
             variant={variant}
-            {...options}
+            {...enhancedOptions}
             {...sanitizeRestProps(rest)}
         >
             <MenuItem value="">{translate('ra.boolean.null')}</MenuItem>