Repository: mui/material-ui (TypeScript)
Date: 2018-11-02 16:39:30+00:00
Task type: Bug Fix

Issue:
[ToggleButtonGroup] Falsy values cause the background/shadow to disappear
- [x] This is not a v0.x issue. <!-- (v0.x is no longer maintained) -->
- [x] This is a Labs issue.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Expected Behavior
Selecting falsy values should not cause the group to render any differently than truthy values.

## Current Behavior
Selecting a falsy value causes the background/shadow to disappear.

## Steps to Reproduce
Link: https://codesandbox.io/s/437j302nx

1. Create a `ToggleButtonGroup` where one of the `ToggleButton` values is falsy and one is truthy (`0` and `1`, for example)
2. Select the falsy value, note that the shadow/background is missing
3. Select a truthy value, note that the shadow/background appears

## Context
I'm working on an application where users configure drinks. One of the options is an amount of milk to be added. The options are `0`, `1`, `2`, `3`, or `4` ounces. Selecting `0` causes the background/shadow to disappear.


Issue discussion:
https://github.com/mui-org/material-ui/blob/979346a189289a47abc7f08df94d2e7d01141ca2/packages/material-ui-lab/src/ToggleButtonGroup/hasValue.js#L7
vs.
https://github.com/mui-org/material-ui/blob/979346a189289a47abc7f08df94d2e7d01141ca2/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js#L52

`hasValue` should just check against `== null`. Feel free to open a PR. Nice catch!
Looks like someone beat me to it. Thanks, @ItamarShDev!

That said, I think it might better to check against `undefined` than `null`. `null` might be a valid value to select in some applications?
Fixed
Here's another example using Material UI Lab 3.0.0-alpha.23

https://codesandbox.io/s/7m3zw91nm0 

Solution patch:
diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
--- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
+++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
@@ -138,7 +138,6 @@ ToggleButtonGroup.propTypes = {
 ToggleButtonGroup.defaultProps = {
   exclusive: false,
   selected: 'auto',
-  value: null,
 };
 
 export default withStyles(styles, { name: 'MuiToggleButtonGroup' })(ToggleButtonGroup);
diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/hasValue.js b/packages/material-ui-lab/src/ToggleButtonGroup/hasValue.js
--- a/packages/material-ui-lab/src/ToggleButtonGroup/hasValue.js
+++ b/packages/material-ui-lab/src/ToggleButtonGroup/hasValue.js
@@ -4,5 +4,5 @@ export default function hasValue(value) {
     return value.length > 0;
   }
 
-  return !!value;
+  return value != null;
 }
diff --git a/pages/lab/api/toggle-button-group.md b/pages/lab/api/toggle-button-group.md
--- a/pages/lab/api/toggle-button-group.md
+++ b/pages/lab/api/toggle-button-group.md
@@ -23,7 +23,7 @@ import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 | <span class="prop-name">exclusive</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, only allow one of the child ToggleButton values to be selected. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |   | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: object) => void`<br>*event:* The event source of the callback<br>*value:* of the selected buttons. When `exclusive` is true this is a single value; when false an array of selected values. If no value is selected the value is null. |
 | <span class="prop-name">selected</span> | <span class="prop-type">union:&nbsp;bool&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br></span> | <span class="prop-default">'auto'</span> | If `true`, render the group in a selected state. If `auto` (the default) render in a selected state if `value` is not empty. |
-| <span class="prop-name">value</span> | <span class="prop-type">any</span> | <span class="prop-default">null</span> | The currently selected value within the group or an array of selected values when `exclusive` is false. |
+| <span class="prop-name">value</span> | <span class="prop-type">any</span> |   | The currently selected value within the group or an array of selected values when `exclusive` is false. |
 
 Any other properties supplied will be spread to the root element (native element).
 


Test patch:
diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js
--- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js
+++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js
@@ -61,7 +61,7 @@ describe('<ToggleButtonGroup />', () => {
 
   it('should not render a selected div when selected is "auto" and a value is missing', () => {
     const wrapper = shallow(
-      <ToggleButtonGroup selected="auto" value={null}>
+      <ToggleButtonGroup selected="auto">
         <ToggleButton value="hello" />
       </ToggleButtonGroup>,
     );
diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/hasValue.test.js b/packages/material-ui-lab/src/ToggleButtonGroup/hasValue.test.js
--- a/packages/material-ui-lab/src/ToggleButtonGroup/hasValue.test.js
+++ b/packages/material-ui-lab/src/ToggleButtonGroup/hasValue.test.js
@@ -21,4 +21,8 @@ describe('<ToggleButton /> hasValue', () => {
   it('should be false for null', () => {
     assert.strictEqual(hasValue(null), false);
   });
+
+  it('should be true for empty string', () => {
+    assert.strictEqual(hasValue(''), true);
+  });
 });