fix(tile): adds onChange call to handlers in selectable tile (#5156)

* fix(selectabletile): adjust handlers so that onchange function is called * fix(tile): add handlonchange function for VO compatibility
carbon-design-system · Jan 27, 2020 · 1ebf04a · 1ebf04a
1 parent f3422c4
commit 1ebf04a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/packages/react/src/components/Tile/Tile-test.js b/packages/react/src/components/Tile/Tile-test.js
@@ -129,14 +129,15 @@ describe('Tile', () => {
   });
 
   describe('Renders selectable tile as expected', () => {
-    const wrapper = mount(
-      <SelectableTile className="extra-class">
-        <div className="child">Test</div>
-      </SelectableTile>
-    );
+    let wrapper;
     let label;
 
     beforeEach(() => {
+      wrapper = mount(
+        <SelectableTile className="extra-class">
+          <div className="child">Test</div>
+        </SelectableTile>
+      );
       wrapper.state().selected = false;
       label = wrapper.find('label');
     });
@@ -200,6 +201,25 @@ describe('Tile', () => {
       expect(wrapper.props().light).toEqual(true);
       expect(wrapper.childAt(1).hasClass('bx--tile--light')).toEqual(true);
     });
+
+    it('should call onChange when the checkbox value changes', () => {
+      const onChange = jest.fn();
+      const wrapper = mount(
+        <SelectableTile onChange={onChange}>
+          <span id="test-id">test</span>
+        </SelectableTile>
+      );
+
+      const content = wrapper.find('#test-id');
+
+      // Tile becomes selected
+      content.simulate('click');
+      expect(onChange).toHaveBeenCalledTimes(1);
+
+      // Tile becomes un-selected
+      content.simulate('click');
+      expect(onChange).toHaveBeenCalledTimes(2);
+    });
   });
 
   describe('Renders expandable tile as expected', () => {

diff --git a/packages/react/src/components/Tile/Tile.js b/packages/react/src/components/Tile/Tile.js
@@ -261,19 +261,15 @@ export class SelectableTile extends Component {
   handleClick = evt => {
     evt.preventDefault();
     evt.persist();
-    const isInput = evt.target === this.input;
-    if (!isInput) {
-      this.setState(
-        {
-          selected: !this.state.selected,
-        },
-        () => {
-          this.props.handleClick(evt);
-        }
-      );
-    } else {
-      this.props.handleClick(evt);
-    }
+    this.setState(
+      {
+        selected: !this.state.selected,
+      },
+      () => {
+        this.props.handleClick(evt);
+        this.props.onChange(evt);
+      }
+    );
   };
 
   handleKeyDown = evt => {
@@ -286,6 +282,7 @@ export class SelectableTile extends Component {
         },
         () => {
           this.props.handleKeyDown(evt);
+          this.props.onChange(evt);
         }
       );
     } else {