Allow users to manually enter colors into theme pickers (#3164)

webapp/components/navbar_dropdown.jsx

@@ -292,7 +292,10 @@ export default class NavbarDropdown extends React.Component {
                         <li>
                             <a
                                 href='#'
-                                onClick={() => this.setState({showUserSettingsModal: true})}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    this.setState({showUserSettingsModal: true});
+                                }}
                             >
                                 <FormattedMessage
                                     id='navbar_dropdown.accountSettings'

webapp/components/user_settings/custom_theme_chooser.jsx

@@ -99,12 +99,13 @@ const messages = defineMessages({
 
 import React from 'react';
 
+const HEX_CODE_LENGTH = 7;
+
 class CustomThemeChooser extends React.Component {
     constructor(props) {
         super(props);
 
         this.onPickerChange = this.onPickerChange.bind(this);
-        this.onInputChange = this.onInputChange.bind(this);
         this.pasteBoxChange = this.pasteBoxChange.bind(this);
         this.toggleContent = this.toggleContent.bind(this);
 
@@ -126,17 +127,16 @@ class CustomThemeChooser extends React.Component {
         });
     }
     onPickerChange(e) {
+        const inputBox = e.target.childNodes[0];
+        if (document.activeElement === inputBox && inputBox.value.length !== HEX_CODE_LENGTH) {
+            return;
+        }
+
         const theme = this.props.theme;
         theme[e.target.id] = e.color.toHex();
         theme.type = 'custom';
         this.props.updateTheme(theme);
     }
-    onInputChange(e) {
-        const theme = this.props.theme;
-        theme[e.target.parentNode.id] = e.target.value;
-        theme.type = 'custom';
-        this.props.updateTheme(theme);
-    }
     pasteBoxChange(e) {
         const text = e.target.value;
 
@@ -225,8 +225,7 @@ class CustomThemeChooser extends React.Component {
                             <select
                                 className='form-control'
                                 type='text'
-                                value={theme[element.id]}
+                                defaultValue={theme[element.id]}
-                                onChange={this.onInputChange}
                             >
                                 {codeThemeOptions}
                             </select>
@@ -258,8 +257,7 @@ class CustomThemeChooser extends React.Component {
                             <input
                                 className='form-control'
                                 type='text'
-                                value={theme[element.id]}
+                                defaultValue={theme[element.id]}
-                                onChange={this.onInputChange}
                             />
                             <span className='input-group-addon'><i></i></span>
                         </div>
@@ -281,8 +279,7 @@ class CustomThemeChooser extends React.Component {
                             <input
                                 className='form-control'
                                 type='text'
-                                value={theme[element.id]}
+                                defaultValue={theme[element.id]}
-                                onChange={this.onInputChange}
                             />
                             <span className='input-group-addon'><i></i></span>
                         </div>
@@ -304,8 +301,7 @@ class CustomThemeChooser extends React.Component {
                             <input
                                 className='form-control'
                                 type='text'
-                                value={theme[element.id]}
+                                defaultValue={theme[element.id]}
-                                onChange={this.onInputChange}
                             />
                             <span className='input-group-addon'><i></i></span>
                         </div>