Force all colorpickers to update after theme pasted in

1 files changed, 11 insertions, 2 deletions

diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 35f836adb..495246424 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/web/react/components/user_settings/custom_theme_chooser.jsx
@@ -19,6 +19,15 @@ export default class CustomThemeChooser extends React.Component {
         });
         $('.color-picker').on('changeColor', this.onPickerChange);
     }
+    componentDidUpdate() {
+        const theme = this.props.theme;
+        Constants.THEME_ELEMENTS.forEach((element) => {
+            if (theme.hasOwnProperty(element.id) && element.id !== 'codeTheme') {
+                $('#' + element.id).data('colorpicker').color.setColor(theme[element.id]);
+                $('#' + element.id).colorpicker('update');
+            }
+        });
+    }
     onPickerChange(e) {
         const theme = this.props.theme;
         theme[e.target.id] = e.color.toHex();
@@ -85,7 +94,7 @@ export default class CustomThemeChooser extends React.Component {
                             <select
                                 className='form-control'
                                 type='text'
-                                defaultValue={theme[element.id]}
+                                value={theme[element.id]}
                                 onChange={this.onInputChange}
                             >
                                 {codeThemeOptions}
@@ -112,7 +121,7 @@ export default class CustomThemeChooser extends React.Component {
                             <input
                                 className='form-control'
                                 type='text'
-                                defaultValue={theme[element.id]}
+                                value={theme[element.id]}
                                 onChange={this.onInputChange}
                             />
                             <span className='input-group-addon'><i></i></span>