diff --git a/webapp/src/components/cardDetail.tsx b/webapp/src/components/cardDetail.tsx
index 5fc1434e2..9622ed3b1 100644
--- a/webapp/src/components/cardDetail.tsx
+++ b/webapp/src/components/cardDetail.tsx
@@ -13,9 +13,9 @@ import {Utils} from '../utils'
 
 import MenuWrapper from '../widgets/menuWrapper'
 import Menu from '../widgets/menu'
+import Editable from '../widgets/editable'
 
 import Button from './button'
-import {Editable} from './editable'
 import {MarkdownEditor} from './markdownEditor'
 import ContentBlock from './contentBlock'
 import CommentsList from './commentsList'
@@ -32,6 +32,7 @@ type Props = {
 
 type State = {
     cardTree?: CardTree
+    title: string
 }
 
 class CardDetail extends React.Component<Props, State> {
@@ -44,7 +45,9 @@ class CardDetail extends React.Component<Props, State> {
 
     constructor(props: Props) {
         super(props)
-        this.state = {}
+        this.state = {
+            title: '',
+        }
     }
 
     componentDidMount() {
@@ -52,11 +55,11 @@ class CardDetail extends React.Component<Props, State> {
         this.cardListener.open([this.props.cardId], async (blockId) => {
             Utils.log(`cardListener.onChanged: ${blockId}`)
             await cardTree.sync()
-            this.setState({...this.state, cardTree})
+            this.setState({cardTree})
         })
         const cardTree = new MutableCardTree(this.props.cardId)
         cardTree.sync().then(() => {
-            this.setState({...this.state, cardTree})
+            this.setState({cardTree, title: cardTree.card.title})
             setTimeout(() => {
                 if (this.titleRef.current) {
                     this.titleRef.current.focus()
@@ -79,8 +82,6 @@ class CardDetail extends React.Component<Props, State> {
         }
         const {card, comments} = cardTree
 
-        const newCommentRef = React.createRef<Editable>()
-        const sendCommentButtonRef = React.createRef<HTMLDivElement>()
         let contentElements
         if (cardTree.contents.length > 0) {
             contentElements =
@@ -151,10 +152,21 @@ class CardDetail extends React.Component<Props, State> {
                     <Editable
                         ref={this.titleRef}
                         className='title'
-                        text={card.title}
+                        value={this.state.title}
                         placeholderText='Untitled'
-                        onChanged={(text) => {
-                            mutator.changeTitle(card, text)
+                        onChange={(title: string) => this.setState({title})}
+                        onBlur={() => mutator.changeTitle(card, this.state.title)}
+                        onFocus={() => this.titleRef.current.focus()}
+                        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
+                            if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
+                                e.stopPropagation()
+                                this.setState({title: this.state.cardTree.card.title})
+                                setTimeout(() => this.titleRef.current.blur(), 0)
+                            } else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
+                                e.stopPropagation()
+                                mutator.changeTitle(card, this.state.title)
+                                this.titleRef.current.blur()
+                            }
                         }}
                     />
 
diff --git a/webapp/src/components/propertyValueElement.tsx b/webapp/src/components/propertyValueElement.tsx
index ee508a51d..47d11ad54 100644
--- a/webapp/src/components/propertyValueElement.tsx
+++ b/webapp/src/components/propertyValueElement.tsx
@@ -8,8 +8,7 @@ import {IPropertyTemplate, IPropertyOption} from '../blocks/board'
 import {OctoUtils} from '../octoUtils'
 import mutator from '../mutator'
 
-import {Editable} from './editable'
-
+import Editable from '../widgets/editable'
 import MenuWrapper from '../widgets/menuWrapper'
 import Menu from '../widgets/menu'
 
@@ -20,7 +19,19 @@ type Props = {
     emptyDisplayValue: string
 }
 
-export default class PropertyValueElement extends React.Component<Props> {
+type State = {
+    value: string
+}
+
+export default class PropertyValueElement extends React.Component<Props, State> {
+    private valueEditor = React.createRef<Editable>()
+
+    constructor(props: Props) {
+        super(props)
+        const propertyValue = props.card.properties[props.propertyTemplate.id]
+        this.state = {value: propertyValue}
+    }
+
     shouldComponentUpdate(): boolean {
         return true
     }
@@ -78,12 +89,23 @@ export default class PropertyValueElement extends React.Component<Props> {
             if (!readOnly) {
                 return (
                     <Editable
-                        key={propertyTemplate.id}
+                        ref={this.valueEditor}
                         className='octo-propertyvalue'
                         placeholderText='Empty'
-                        text={displayValue}
-                        onChanged={(text) => {
-                            mutator.changePropertyValue(card, propertyTemplate.id, text)
+                        value={this.state.value}
+                        onChange={(value) => this.setState({value})}
+                        onBlur={() => mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)}
+                        onFocus={() => this.valueEditor.current.focus()}
+                        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
+                            if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
+                                e.stopPropagation()
+                                this.setState({value: propertyValue})
+                                setTimeout(() => this.valueEditor.current.blur(), 0)
+                            } else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
+                                e.stopPropagation()
+                                mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)
+                                this.valueEditor.current.blur()
+                            }
                         }}
                     />
                 )
diff --git a/webapp/src/components/tableComponent.tsx b/webapp/src/components/tableComponent.tsx
index 3e83c37a1..adc0dde70 100644
--- a/webapp/src/components/tableComponent.tsx
+++ b/webapp/src/components/tableComponent.tsx
@@ -29,33 +29,19 @@ type Props = {
 }
 
 type State = {
-    isSearching: boolean
     shownCard?: Card
-    viewMenu: boolean
-    showFilter: boolean
 }
 
 class TableComponent extends React.Component<Props, State> {
     private draggedHeaderTemplate: IPropertyTemplate
     private cardIdToRowMap = new Map<string, React.RefObject<TableRow>>()
     private cardIdToFocusOnRender: string
-    private searchFieldRef = React.createRef<Editable>()
-
-    constructor(props: Props) {
-        super(props)
-        this.state = {isSearching: Boolean(this.props.boardTree?.getSearchText()), viewMenu: false, showFilter: false}
-    }
+    state: State = {}
 
     shouldComponentUpdate(): boolean {
         return true
     }
 
-    componentDidUpdate(prevPros: Props, prevState: State): void {
-        if (this.state.isSearching && !prevState.isSearching) {
-            this.searchFieldRef.current.focus()
-        }
-    }
-
     render(): JSX.Element {
         const {boardTree, showView} = this.props
 
@@ -225,12 +211,6 @@ class TableComponent extends React.Component<Props, State> {
         )
     }
 
-    private focusOnCardTitle(cardId: string): void {
-        const tableRowRef = this.cardIdToRowMap.get(cardId)
-        Utils.log(`focusOnCardTitle, ${tableRowRef?.current ?? 'undefined'}`)
-        tableRowRef?.current.focusOnTitle()
-    }
-
     private addCard = async (show = false) => {
         const {boardTree} = this.props
 
diff --git a/webapp/src/components/tableRow.tsx b/webapp/src/components/tableRow.tsx
index c55e58773..d985750c3 100644
--- a/webapp/src/components/tableRow.tsx
+++ b/webapp/src/components/tableRow.tsx
@@ -6,8 +6,9 @@ import {BoardTree} from '../viewModel/boardTree'
 import {Card} from '../blocks/card'
 import mutator from '../mutator'
 
+import Editable from '../widgets/editable'
+
 import PropertyValueElement from './propertyValueElement'
-import {Editable} from './editable'
 import {CardDialog} from './cardDialog'
 import RootPortal from './rootPortal'
 
@@ -20,12 +21,17 @@ type Props = {
 
 type State = {
     showCard: boolean
+    title: string 
 }
 
 class TableRow extends React.Component<Props, State> {
     private titleRef = React.createRef<Editable>()
-    state = {
-        showCard: false,
+    constructor(props: Props) {
+        super(props)
+        this.state = {
+            showCard: false,
+            title: props.card.title,
+        }
     }
 
     shouldComponentUpdate(): boolean {
@@ -44,7 +50,7 @@ class TableRow extends React.Component<Props, State> {
 
         const openButonRef = React.createRef<HTMLDivElement>()
 
-        const element = (
+        return (
             <div
                 className='octo-table-row'
                 key={card.id}
@@ -66,12 +72,21 @@ class TableRow extends React.Component<Props, State> {
                         <div className='octo-icon'>{card.icon}</div>
                         <Editable
                             ref={this.titleRef}
-                            text={card.title}
+                            value={this.state.title}
                             placeholderText='Untitled'
-                            onChanged={(text) => {
-                                mutator.changeTitle(card, text)
-                            }}
-                            onKeyDown={(e) => {
+                            onChange={(title: string) => this.setState({title})}
+                            onBlur={() => mutator.changeTitle(card, this.state.title)}
+                            onFocus={() => this.titleRef.current.focus()}
+                            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
+                                if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
+                                    e.stopPropagation()
+                                    this.setState({title: card.title})
+                                    setTimeout(() => this.titleRef.current.blur(), 0)
+                                } else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
+                                    e.stopPropagation()
+                                    mutator.changeTitle(card, this.state.title)
+                                    this.titleRef.current.blur()
+                                }
                                 onKeyDown(e)
                             }}
                         />
@@ -113,9 +128,8 @@ class TableRow extends React.Component<Props, State> {
                                 />
                             </div>)
                     })}
-            </div>)
-
-        return element
+            </div>
+        )
     }
 
     focusOnTitle(): void {