diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx
index fd877f06fd4095..f14b5a39fb9c29 100644
--- a/docs/src/app/components/pages/components/lists.jsx
+++ b/docs/src/app/components/pages/components/lists.jsx
@@ -215,6 +215,12 @@ This is automatically disabled if leftCheckbox or rightToggle is set.`,
desc: 'This is the block element that contains the primary text. If a string is passed in, a div ' +
'tag will be rendered.',
},
+ {
+ name: 'primaryTogglesNestedList',
+ type: 'bool',
+ header: 'default: false',
+ desc: 'If provided, tapping on the primary text of the item toggles the nested list.',
+ },
{
name: 'rightAvatar',
type: 'element',
@@ -481,6 +487,7 @@ import ListItem from 'material-ui/lib/lists/list-item';
primaryText="Inbox"
leftIcon={}
initiallyOpen={true}
+ primaryTogglesNestedList={true}
nestedItems={[
} />,
{},
onNestedListToggle: () => {},
onTouchStart: () => {},
+ primaryTogglesNestedList: false,
secondaryTextLines: 1,
};
},
@@ -123,6 +125,7 @@ const ListItem = React.createClass({
rightIconButton,
rightToggle,
primaryText,
+ primaryTogglesNestedList,
secondaryText,
secondaryTextLines,
style,
@@ -360,7 +363,7 @@ const ListItem = React.createClass({
onMouseLeave={this._handleMouseLeave}
onMouseEnter={this._handleMouseEnter}
onTouchStart={this._handleTouchStart}
- onTouchTap={onTouchTap}
+ onTouchTap={primaryTogglesNestedList ? this._handleNestedListToggle : onTouchTap}
ref="enhancedButton"
style={this.mergeStyles(styles.root, style)}>