3 files changed, 20 insertions, 17 deletions
diff --git a/webui/src/components/BackToListButton.tsx b/webui/src/components/BackToListButton.tsx
index 7ca53ad0..41e1d68a 100644
--- a/webui/src/components/BackToListButton.tsx
+++ b/webui/src/components/BackToListButton.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
@@ -25,7 +26,8 @@ function BackToListButton() {
       variant="contained"
       className={classes.backButton}
       aria-label="back to issue list"
-      href="/"
+      component={Link}
+      to="/"
     >
       <ArrowBackIcon />
       Back to List
diff --git a/webui/src/components/BugTitleForm/BugTitleForm.tsx b/webui/src/components/BugTitleForm/BugTitleForm.tsx
index a7d5a820..665ecd4c 100644
--- a/webui/src/components/BugTitleForm/BugTitleForm.tsx
+++ b/webui/src/components/BugTitleForm/BugTitleForm.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 
 import { Button, makeStyles, Typography } from '@material-ui/core';
 
@@ -78,6 +79,10 @@ function BugTitleForm({ bug }: Props) {
 
   function submitNewTitle() {
     if (!isFormValid()) return;
+    if (bug.title === issueTitleInput.value) {
+      cancelChange();
+      return;
+    }
     setTitle({
       variables: {
         input: {
@@ -106,7 +111,7 @@ function BugTitleForm({ bug }: Props) {
 
   function editableBugTitle() {
     return (
-      <form className={classes.headerTitle} onSubmit={submitNewTitle}>
+      <form className={classes.headerTitle}>
         <BugTitleInput
           inputRef={(node) => {
             issueTitleInput = node;
@@ -123,7 +128,7 @@ function BugTitleForm({ bug }: Props) {
             className={classes.saveButton}
             size="small"
             variant="contained"
-            type="submit"
+            onClick={() => submitNewTitle()}
             disabled={issueTitle.length === 0}
           >
             Save
@@ -157,7 +162,8 @@ function BugTitleForm({ bug }: Props) {
                 className={classes.greenButton}
                 size="small"
                 variant="contained"
-                href="/new"
+                component={Link}
+                to="/new"
               >
                 New bug
               </Button>
diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 3064f6e4..63146cc9 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -67,14 +67,14 @@ const DisabledTabWithTooltip = (props: TabProps) => {
 function Header() {
   const classes = useStyles();
   const location = useLocation();
-  const [selectedTab, setTab] = React.useState(location.pathname);
 
-  const handleTabClick = (
-    event: React.ChangeEvent<{}>,
-    newTabValue: string
-  ) => {
-    setTab(newTabValue);
-  };
+  // Prevents error of invalid tab selection in <Tabs>
+  // Will return a valid tab path or false if path is unkown.
+  function highlightTab() {
+    const validTabs = ['/', '/code', '/pulls', '/settings'];
+    const tab = validTabs.find((tabPath) => tabPath === location.pathname);
+    return tab === undefined ? false : tab;
+  }
 
   return (
     <>
@@ -92,12 +92,7 @@ function Header() {
         </Toolbar>
       </AppBar>
       <div className={classes.offset} />
-      <Tabs
-        centered
-        value={selectedTab}
-        onChange={handleTabClick}
-        aria-label="nav tabs"
-      >
+      <Tabs centered value={highlightTab()} aria-label="nav tabs">
         <DisabledTabWithTooltip label="Code" value="/code" {...a11yProps(1)} />
         <Tab label="Bugs" value="/" component={Link} to="/" {...a11yProps(2)} />
         <DisabledTabWithTooltip