make bg color selector more stable,

doesn't close on click now anymore
deltachat · Nov 25, 2019 · a6f837f · a6f837f
1 parent 385d4c4
commit a6f837f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/renderer/components/dialogs/Settings.js b/src/renderer/components/dialogs/Settings.js
@@ -387,7 +387,12 @@ class BackgroundSelector extends React.Component {
   constructor () {
     super()
     this.fileInput = React.createRef()
-    this.colorInput = React.createRef()
+    this.colorInput = document.getElementById('color-input') // located in index.html outside of react
+    this.colorInput.onchange = ev => this.onColor.bind(this)(ev)
+  }
+
+  componentWillUnmount () {
+    this.colorInput.onchange = null
   }
 
   render () {
@@ -420,12 +425,6 @@ class BackgroundSelector extends React.Component {
           'background_old.jpg'
         ].map((elem) => <div onClick={this.onButton.bind(this, 'pimage')} style={{ backgroundImage: `url(../images/backgrounds/${elem})` }} key={elem} data-url={elem} />) }
       </div>
-      <div hidden>
-        <input
-          type={'color'}
-          onChange={this.onColor.bind(this)}
-          ref={this.colorInput} /> // todo put this somewhere where it isn't closed by react rerender imidiately
-      </div>
     </div>
     )
   }
@@ -449,7 +448,7 @@ class BackgroundSelector extends React.Component {
         ipcRenderer.send('selectBackgroundImage', ev.target.dataset.url)
         break
       case 'color':
-        this.colorInput.current && this.colorInput.current.click()
+        this.colorInput && this.colorInput.click()
         break
       default:
         /* ignore-console-log */

diff --git a/static/main.html b/static/main.html
@@ -28,5 +28,8 @@
   <body>
     <div id='root'></div>
     <script type="text/javascript" src="bundle.js"></script>
+    <div hidden>
+      <input id='color-input' type='color'/>
+    </div>
   </body>
 </html>