fixed: focussing on title-edit

app/actions/dat-middleware.js

@@ -77,10 +77,10 @@ export default class DatMiddleware {
     this.listeners.forEach(listener => listener(action))
   }
 
-  async updateTitle ({ key, editValue }) {
+  async updateTitle ({ key, title }) {
     const dat = this.dats[key]
     const filePath = joinPath(dat.path, 'dat.json')
-    const metadata = { ...dat.dat.metadata, title: editValue }
+    const metadata = { ...dat.dat.metadata, title: title }
 
     try {
       await writeFile(filePath, JSON.stringify(metadata))

app/components/title-field.js

@@ -1,20 +1,21 @@
 import React, { Component } from 'react'
-import ReactDOM from 'react-dom'
 import styled from 'styled-components'
 import Icon from './icon'
 import { Plain as PlainButton, Green as GreenButton } from './button'
 
 const Overlay = styled.div`
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.2);
+  z-index: 1;
 `
 
 const EditableFieldWrapper = styled.div`
   position: relative;
+  z-index: 1;
   h2 {
     position: relative;
   }
@@ -36,38 +37,32 @@ const EditableFieldWrapper = styled.div`
   }
 `
 
-const InputFieldStyle = styled.input`
+const InputField = styled.input`
   :focus {
     outline: none;
   }
 `
 
-class InputField extends Component {
-  componentDidMount () {
-    const input = ReactDOM.findDOMNode(this)
-    input.focus()
-    input.select()
-  }
-  render () {
-    return <InputFieldStyle {...this.props} />
-  }
-}
-
 class TitleField extends Component {
-  constructor (props) {
-    super(props)
-    this.titleInput = React.createRef()
+  startEditing () {
+    this.setState({ editing: true })
   }
 
   onclick (ev) {
     ev.stopPropagation()
     ev.preventDefault()
-    this.setState({ editing: true })
+    this.startEditing()
+
+    // setTimeout? Because ref on input is set asynchronously, and later. So we can't do focus, select on it until ref is set
+    setTimeout(() => {
+      this.titleInput.focus()
+      this.titleInput.select()
+    }, 0)
   }
 
   commit () {
     const oldValue = this.props.value
-    const newValue = ReactDOM.findDOMNode(this.titleInput.current).value
+    const newValue = this.titleInput.value
     if (oldValue !== newValue) {
       this.props.onChange(newValue)
     }
@@ -115,12 +110,14 @@ class TitleField extends Component {
               className='bn f6 pl1 normal w-100'
               defaultValue={value}
               onKeyUp={ev => this.handleKeyup(ev)}
-              ref={this.titleInput}
+              innerRef={input => {
+                this.titleInput = input
+              }}
             />
-            {modified ? (
-              <GreenButton onClick={() => this.commit()}>Save</GreenButton>
+            {!modified ? (
+              <PlainButton onClick={() => this.commit()}>Save</PlainButton>
             ) : (
-              <PlainButton onClick={() => this.cancel()}>Save</PlainButton>
+              <GreenButton onClick={() => this.commit()}>Save</GreenButton>
             )}
           </EditableFieldWrapper>
         </div>

app/containers/drag-drop.js

@@ -34,14 +34,10 @@ const DropIcon = styled(Icon)`
   color: white;
 `
 
-const DragDropContainer = connect(mapStateToProps, mapDispatchToProps)(function (
-  props
-) {
-  return (
-    <DropFrame {...props}>
-      <DropIcon name='create-new-dat' />
-    </DropFrame>
-  )
+const DragDropContainer = connect(mapStateToProps, mapDispatchToProps)(function(props){
+  return <DropFrame {...props}>
+    <DropIcon name='create-new-dat' />
+  </DropFrame>
 })
 
 export default DragDropContainer