From c2a0f5e5d0c32e35bc1c5463b83b023ab8c2aa48 Mon Sep 17 00:00:00 2001
From: Jordan Knott <jordan@jordanthedev.com>
Date: Tue, 5 Jan 2021 18:53:48 -0600
Subject: [PATCH] feat: change project title input to auto-grow on content
 change

---
 .../src/shared/components/TopNavbar/Styles.ts | 19 +++++++++++---
 .../src/shared/components/TopNavbar/index.tsx | 25 +++++++++++--------
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/frontend/src/shared/components/TopNavbar/Styles.ts b/frontend/src/shared/components/TopNavbar/Styles.ts
index c9bd113..123ddb8 100644
--- a/frontend/src/shared/components/TopNavbar/Styles.ts
+++ b/frontend/src/shared/components/TopNavbar/Styles.ts
@@ -1,11 +1,9 @@
 import styled, { css } from 'styled-components';
-import TextareaAutosize from 'react-autosize-textarea';
 import { mixin } from 'shared/utils/styles';
 import Button from 'shared/components/Button';
 import { Taskcafe } from 'shared/icons';
 import { NavLink, Link } from 'react-router-dom';
 import TaskAssignee from 'shared/components/TaskAssignee';
-import { useRef } from 'react';
 
 export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
   z-index: ${props => props.zIndex};
@@ -163,7 +161,20 @@ export const ProjectName = styled.h1`
   padding: 3px 10px 3px 8px;
   margin: -4px 0;
 `;
-export const ProjectNameTextarea = styled(TextareaAutosize)`
+
+export const ProjectNameWrapper = styled.div`
+  position: relative;
+`;
+export const ProjectNameSpan = styled.div`
+  padding: 3px 10px 3px 8px;
+  font-weight: 600;
+  font-size: 20px;
+`;
+export const ProjectNameTextarea = styled.input`
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
   border: none;
   resize: none;
   overflow: hidden;
@@ -171,7 +182,7 @@ export const ProjectNameTextarea = styled(TextareaAutosize)`
   background: transparent;
   border-radius: 3px;
   box-shadow: none;
-  margin: -4px 0;
+  margin: 0;
 
   letter-spacing: normal;
   word-spacing: normal;
diff --git a/frontend/src/shared/components/TopNavbar/index.tsx b/frontend/src/shared/components/TopNavbar/index.tsx
index e711837..a092e9b 100644
--- a/frontend/src/shared/components/TopNavbar/index.tsx
+++ b/frontend/src/shared/components/TopNavbar/index.tsx
@@ -13,6 +13,8 @@ import {
   LogoContainer,
   NavSeparator,
   IconContainerWrapper,
+  ProjectNameWrapper,
+  ProjectNameSpan,
   ProjectNameTextarea,
   InviteButton,
   GlobalActions,
@@ -73,7 +75,7 @@ const ProjectHeading: React.FC<ProjectHeadingProps> = ({
 }) => {
   const [isEditProjectName, setEditProjectName] = useState(false);
   const [projectName, setProjectName] = useState(initialProjectName);
-  const $projectName = useRef<HTMLTextAreaElement>(null);
+  const $projectName = useRef<HTMLInputElement>(null);
   useEffect(() => {
     if (isEditProjectName && $projectName && $projectName.current) {
       $projectName.current.focus();
@@ -84,7 +86,7 @@ const ProjectHeading: React.FC<ProjectHeadingProps> = ({
     setProjectName(initialProjectName);
   }, [initialProjectName]);
 
-  const onProjectNameChange = (event: React.FormEvent<HTMLTextAreaElement>): void => {
+  const onProjectNameChange = (event: React.FormEvent<HTMLInputElement>): void => {
     setProjectName(event.currentTarget.value);
   };
   const onProjectNameBlur = () => {
@@ -106,14 +108,17 @@ const ProjectHeading: React.FC<ProjectHeadingProps> = ({
   return (
     <>
       {isEditProjectName ? (
-        <ProjectNameTextarea
-          ref={$projectName}
-          onChange={onProjectNameChange}
-          onKeyDown={onProjectNameKeyDown}
-          onBlur={onProjectNameBlur}
-          spellCheck={false}
-          value={projectName}
-        />
+        <ProjectNameWrapper>
+          <ProjectNameSpan>{projectName}</ProjectNameSpan>
+          <ProjectNameTextarea
+            ref={$projectName}
+            onChange={onProjectNameChange}
+            onKeyDown={onProjectNameKeyDown}
+            onBlur={onProjectNameBlur}
+            spellCheck={false}
+            value={projectName}
+          />
+        </ProjectNameWrapper>
       ) : (
         <ProjectName
           onClick={() => {