Working type submit for forms - Button Component

src/core/client/auth/components/SignIn.tsx

@@ -99,7 +99,13 @@ const SignIn: StatelessComponent<SignInForm> = props => {
             </Field>
 
             <div className={styles.footer}>
-              <Button variant="filled" color="primary" size="large" fullWidth>
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                fullWidth
+                type="submit"
+              >
                 Sign in and join the conversation
               </Button>
               <Flex

src/core/client/ui/components/BaseButton/BaseButton.tsx

@@ -32,6 +32,8 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLButtonElement>;
+
+  type?: "submit" | "reset" | "button";
 }
 
 /**
@@ -45,15 +47,17 @@ const BaseButton: StatelessComponent<InnerProps> = ({
   keyboardFocus,
   mouseHover,
   forwardRef,
-  type: typeProp,
+  type,
   ...rest
 }) => {
+  console.log("type", type, "Basebutton");
+
   let Element = "button";
+
   if (anchor) {
     Element = "a";
   }
 
-  let type = typeProp;
   if (anchor && type) {
     // tslint:disable:next-line: no-console
     console.warn(
@@ -69,7 +73,9 @@ const BaseButton: StatelessComponent<InnerProps> = ({
     [classes.mouseHover]: mouseHover,
   });
 
-  return <Element {...rest} className={rootClassName} ref={forwardRef} />;
+  return (
+    <Element {...rest} className={rootClassName} ref={forwardRef} type={type} />
+  );
 };
 
 const enhanced = withForwardRef(

src/core/client/ui/components/Button/Button.tsx

@@ -36,6 +36,8 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** If set renders active state e.g. to implement toggle buttons */
   active?: boolean;
 
+  type?: "submit" | "reset" | "button";
+
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLButtonElement>;
 }
@@ -57,9 +59,12 @@ export class Button extends React.Component<InnerProps> {
       disabled,
       forwardRef,
       variant,
+      type,
       ...rest
     } = this.props;
 
+    console.log("type", type, "---------");
+
     const rootClassName = cn(classes.root, className, {
       [classes.sizeRegular]: size === "regular",
       [classes.sizeSmall]: size === "small",
@@ -84,6 +89,7 @@ export class Button extends React.Component<InnerProps> {
         classes={pick(classes, "keyboardFocus", "mouseHover")}
         disabled={disabled}
         forwardRef={forwardRef}
+        type={type}
         {...rest}
       />
     );