fix(Button): only default to button when click is handled (#383)

fixes: #382
reactstrap · Apr 3, 2017 · af3ccbe · af3ccbe
1 parent 5461049
commit af3ccbe
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/src/Button.js b/src/Button.js
@@ -70,7 +70,7 @@ class Button extends React.Component {
 
     return (
       <Tag
-        type={Tag === 'button' ? 'button' : undefined}
+        type={(Tag === 'button' && attributes.onClick) ? 'button' : undefined}
         {...attributes}
         className={classes}
         ref={getRef}

diff --git a/src/DropdownItem.js b/src/DropdownItem.js
@@ -88,7 +88,7 @@ class DropdownItem extends React.Component {
 
     return (
       <Tag
-        type={Tag === 'button' ? 'button' : undefined}
+        type={(Tag === 'button' && (props.onClick || this.props.toggle)) ? 'button' : undefined}
         {...props}
         tabIndex={tabIndex}
         className={classes}

diff --git a/src/__tests__/Button.spec.js b/src/__tests__/Button.spec.js
@@ -24,9 +24,16 @@ describe('Button', () => {
     expect(wrapper.text()).toBe('Home');
   });
 
-  it('should render type as "button" by default when tag is "button"', () => {
+  it('should render type as undefined by default when tag is "button"', () => {
     const wrapper = mount(<Button>Home</Button>);
 
+    expect(wrapper.find('button').prop('type')).toBe(undefined);
+    expect(wrapper.text()).toBe('Home');
+  });
+
+  it('should render type as "button" by default when tag is "button" and onClick is provided', () => {
+    const wrapper = mount(<Button onClick={() => {}}>Home</Button>);
+
     expect(wrapper.find('button').prop('type')).toBe('button');
     expect(wrapper.text()).toBe('Home');
   });

diff --git a/src/__tests__/DropdownItem.spec.js b/src/__tests__/DropdownItem.spec.js
@@ -26,6 +26,20 @@ describe('DropdownItem', () => {
     expect(wrapper.text()).toBe('Home');
   });
 
+  it('should render type as undefined by default when tag is "button" and toggle is false', () => {
+    const wrapper = mount(<DropdownItem toggle={false}>Home</DropdownItem>);
+
+    expect(wrapper.find('button').prop('type')).toBe(undefined);
+    expect(wrapper.text()).toBe('Home');
+  });
+
+  it('should render type as "button" by default when tag is "button" and onClick is provided', () => {
+    const wrapper = mount(<DropdownItem onClick={() => {}}>Home</DropdownItem>);
+
+    expect(wrapper.find('button').prop('type')).toBe('button');
+    expect(wrapper.text()).toBe('Home');
+  });
+
   it('should render type as user defined when defined by the user', () => {
     const wrapper = mount(<DropdownItem type="submit">Home</DropdownItem>);