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;