fix(Tile): prevent spacebar in textinput from closing ExpandableTile (#…

…8638) * fix(Tile): prevent spacebar in textinput from closing ExpandableTile * chore(tests): update snapshots * fix(ExpandableTile): don't close on click if clicking on input Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · May 31, 2021 · 9541752 · 9541752
1 parent 41567a1
commit 9541752
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5773,6 +5773,12 @@ Map {
       "onBeforeClick": Object {
         "type": "func",
       },
+      "onClick": Object {
+        "type": "func",
+      },
+      "onKeyUp": Object {
+        "type": "func",
+      },
       "tabIndex": Object {
         "type": "number",
       },

diff --git a/packages/react/src/components/Tile/Tile-story.js b/packages/react/src/components/Tile/Tile-story.js
@@ -24,6 +24,7 @@ import {
   TileAboveTheFoldContent,
   TileBelowTheFoldContent,
 } from '../Tile';
+import TextInput from '../TextInput';
 import TileGroup from '../TileGroup';
 import RadioTile from '../RadioTile';
 import Link from '../Link';
@@ -169,7 +170,10 @@ export const Expandable = () => (
       <div style={{ height: '200px' }}>Above the fold content here</div>
     </TileAboveTheFoldContent>
     <TileBelowTheFoldContent>
-      <div style={{ height: '400px' }}>Below the fold content here</div>
+      <div style={{ height: '400px' }}>
+        Below the fold content here
+        <TextInput id="test2" invalidText="A valid value is required" />
+      </div>
     </TileBelowTheFoldContent>
   </ExpandableTile>
 );
diff --git a/packages/react/src/components/Tile/Tile.js b/packages/react/src/components/Tile/Tile.js
@@ -17,6 +17,7 @@ import {
 } from '@carbon/icons-react';
 import { keys, matches } from '../../internal/keyboard';
 import deprecate from '../../prop-types/deprecate';
+import { composeEventHandlers } from '../../tools/events';
 
 const { prefix } = settings;
 
@@ -428,6 +429,16 @@ export class ExpandableTile extends Component {
      */
     onBeforeClick: PropTypes.func,
 
+    /**
+     * optional handler to trigger a function the Tile is clicked
+     */
+    onClick: PropTypes.func,
+
+    /**
+     * optional handler to trigger a function when a key is pressed
+     */
+    onKeyUp: PropTypes.func,
+
     /**
      * The `tabindex` attribute.
      */
@@ -528,7 +539,7 @@ export class ExpandableTile extends Component {
   };
 
   handleClick = (evt) => {
-    if (!this.props.onBeforeClick(evt)) {
+    if (!this.props.onBeforeClick(evt) || evt.target.tagName === 'INPUT') {
       return;
     }
     evt.persist();
@@ -543,18 +554,11 @@ export class ExpandableTile extends Component {
     );
   };
 
-  handleKeyDown = (evt) => {
-    if (matches(evt, [keys.Enter, keys.Space])) {
-      evt.persist();
-      this.setState(
-        {
-          expanded: !this.state.expanded,
-        },
-        () => {
-          this.setMaxHeight();
-          this.props.handleClick(evt);
-        }
-      );
+  handleKeyUp = (evt) => {
+    if (evt.target !== this.tile) {
+      if (matches(evt, [keys.Enter, keys.Space])) {
+        evt.preventDefault();
+      }
     }
   };
 
@@ -570,6 +574,8 @@ export class ExpandableTile extends Component {
       tileMaxHeight, // eslint-disable-line
       tilePadding, // eslint-disable-line
       handleClick, // eslint-disable-line
+      onClick,
+      onKeyUp,
       tileCollapsedIconText,
       tileExpandedIconText,
       tileCollapsedLabel,
@@ -611,7 +617,8 @@ export class ExpandableTile extends Component {
         aria-expanded={isExpanded}
         title={isExpanded ? tileExpandedIconText : tileCollapsedIconText}
         {...other}
-        onClick={this.handleClick}
+        onKeyUp={composeEventHandlers([onKeyUp, this.handleKeyUp])}
+        onClick={composeEventHandlers([onClick, this.handleClick])}
         tabIndex={tabIndex}>
         <div
           ref={(tileContent) => {