From 0bed01a0629e13383015c17e78fd58a3fcdf8ecd Mon Sep 17 00:00:00 2001
From: Tom Moor <tom@getoutline.com>
Date: Sat, 14 Jan 2023 22:14:50 -0500
Subject: [PATCH] fix: Cannot click on input in sidebar when editing
 doc/collection (#4716)

fix: Start editing with all text selected
fix: Styling issue around input
---
 .../Sidebar/components/EditableTitle.tsx          | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/components/Sidebar/components/EditableTitle.tsx b/app/components/Sidebar/components/EditableTitle.tsx
index 5213c143b..dd8bdac18 100644
--- a/app/components/Sidebar/components/EditableTitle.tsx
+++ b/app/components/Sidebar/components/EditableTitle.tsx
@@ -46,6 +46,15 @@ function EditableTitle({
     [originalValue]
   );
 
+  const stopPropagation = React.useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+
+  const handleFocus = React.useCallback((event) => {
+    event.target.select();
+  }, []);
+
   const handleSave = React.useCallback(
     async (ev) => {
       ev.preventDefault();
@@ -85,9 +94,11 @@ function EditableTitle({
             dir="auto"
             type="text"
             value={value}
+            onClick={stopPropagation}
             onKeyDown={handleKeyDown}
             onChange={handleChange}
             onBlur={handleSave}
+            onFocus={handleFocus}
             autoFocus
             {...rest}
           />
@@ -102,11 +113,11 @@ function EditableTitle({
 }
 
 const Input = styled.input`
-  color: ${(props) => props.theme.sidebarText};
+  color: ${(props) => props.theme.text};
   background: ${(props) => props.theme.background};
   width: calc(100% + 12px);
   border-radius: 3px;
-  border: 1px solid ${(props) => props.theme.inputBorderFocused};
+  border: 0;
   padding: 5px 6px;
   margin: -4px;
   height: 32px;