fix: Cannot click on input in sidebar when editing doc/collection (#4716)

fix: Start editing with all text selected
fix: Styling issue around input

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;