fix: don't prevent default on button clicks (#33)

Author: jquense

src/Anchor.tsx

@@ -4,7 +4,11 @@
 import * as React from 'react';
 
 import { useEventCallback } from '@restart/hooks';
-import { useButtonProps, isTrivialHref } from './Button';
+import { useButtonProps } from './Button';
+
+export function isTrivialHref(href?: string) {
+  return !href || href.trim() === '#';
+}
 
 export interface AnchorProps extends React.HTMLAttributes<HTMLElement> {
   href?: string;

src/Button.tsx

@@ -61,7 +61,7 @@ export function useButtonProps({
   }
 
   const handleClick = (event: React.MouseEvent | React.KeyboardEvent) => {
-    if (disabled || isTrivialHref(href)) {
+    if (disabled || (tagName === 'a' && isTrivialHref(href))) {
       event.preventDefault();
     }
 

test/ButtonSpec.tsx

@@ -101,6 +101,51 @@ describe('<Button>', () => {
     expect(clickSpy).to.have.not.been.called;
   });
 
+  // eslint-disable-next-line mocha/no-setup-in-describe
+  ['#', ''].forEach((href) => {
+    it(`should prevent default on trivial href="${href}" clicks`, () => {
+      const clickSpy = sinon.spy();
+
+      const { getByText } = render(
+        <div onClick={clickSpy}>
+          <Button href={href}>Title</Button>
+        </div>,
+      );
+
+      const button = getByText('Title');
+
+      expect(button).to.exist;
+
+      fireEvent.click(button);
+
+      expect(clickSpy).to.have.been.called;
+      const event = clickSpy.getCall(0).args[0];
+
+      expect(event.defaultPrevented).to.equal(true);
+    });
+  });
+
+  it(`should not prevent default on button clicks`, () => {
+    const clickSpy = sinon.spy();
+
+    const { getByText } = render(
+      <div onClick={clickSpy}>
+        <Button>Title</Button>
+      </div>,
+    );
+
+    const button = getByText('Title');
+
+    expect(button).to.exist;
+
+    fireEvent.click(button);
+
+    expect(clickSpy).to.have.been.called;
+    const event = clickSpy.getCall(0).args[0];
+
+    expect(event.defaultPrevented).to.equal(false);
+  });
+
   it('Should be disabled link', () => {
     const clickSpy = sinon.spy();