fix(ui): input fields reset on clear #452

polonel · Feb 20, 2022 · 3b8682c · 3b8682c
1 parent 7a6553c
commit 3b8682c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 27 deletions.
diff --git a/src/client/components/Settings/InputWithSave/index.jsx b/src/client/components/Settings/InputWithSave/index.jsx
@@ -19,37 +19,48 @@ import { connect } from 'react-redux'
 import helpers from 'lib/helpers'
 
 import { updateSetting } from 'actions/settings'
+import { observer } from 'mobx-react'
+import { makeObservable, observable } from 'mobx'
 
+@observer
 class InputWithSave extends React.Component {
+  @observable value = ''
+
   constructor (props) {
     super(props)
-    this.state = {
-      value: this.props.value
-    }
+
+    makeObservable(this)
   }
 
   componentDidMount () {
+    this.value = this.props.initialValue ? this.props.initialValue : ''
     helpers.UI.inputs()
   }
 
-  static getDerivedStateFromProps (nextProps, state) {
-    if (!state.value) {
-      return {
-        value: nextProps.value
+  componentDidUpdate (prevProps, prevState, snapshot) {
+    if (typeof this.props.initialValue !== 'undefined') {
+      if (prevProps.initialValue !== this.props.initialValue) {
+        this.value = this.props.initialValue
       }
     }
-
-    return null
   }
 
+  // static getDerivedStateFromProps (nextProps, state) {
+  //   if (!state.value) {
+  //     return {
+  //       value: nextProps.value
+  //     }
+  //   }
+  //
+  //   return null
+  // }
+
   onSaveClicked () {
-    this.props.updateSetting({ name: this.props.settingName, value: this.state.value, stateName: this.props.stateName })
+    this.props.updateSetting({ name: this.props.settingName, value: this.value, stateName: this.props.stateName })
   }
 
   updateValue (evt) {
-    this.setState({
-      value: evt.target.value
-    })
+    this.value = evt.target.value
   }
 
   render () {
@@ -63,7 +74,7 @@ class InputWithSave extends React.Component {
             id={this.props.stateName}
             className='md-input md-input-width-medium'
             type='text'
-            value={this.state.value}
+            value={this.value}
             onChange={evt => this.updateValue(evt)}
           />
         </div>
@@ -82,11 +93,9 @@ InputWithSave.propTypes = {
   settingName: PropTypes.string.isRequired,
   stateName: PropTypes.string.isRequired,
   saveLabel: PropTypes.string,
+  initialValue: PropTypes.string,
   value: PropTypes.string,
   width: PropTypes.string
 }
 
-export default connect(
-  null,
-  { updateSetting }
-)(InputWithSave)
+export default connect(null, { updateSetting })(InputWithSave)
diff --git a/src/client/containers/Settings/General/index.jsx b/src/client/containers/Settings/General/index.jsx
@@ -70,11 +70,15 @@ class GeneralSettings extends React.Component {
     const { active } = this.props
 
     const SiteTitle = (
-      <InputWithSave stateName='siteTitle' settingName='gen:sitetitle' value={this.getSettingsValue('siteTitle')} />
+      <InputWithSave
+        stateName='siteTitle'
+        settingName='gen:sitetitle'
+        initialValue={this.getSettingsValue('siteTitle')}
+      />
     )
 
     const SiteUrl = (
-      <InputWithSave stateName='siteUrl' settingName='gen:siteurl' value={this.getSettingsValue('siteUrl')} />
+      <InputWithSave stateName='siteUrl' settingName='gen:siteurl' initialValue={this.getSettingsValue('siteUrl')} />
     )
 
     const Timezone = (
@@ -144,7 +148,7 @@ class GeneralSettings extends React.Component {
                   <InputWithSave
                     stateName='timeFormat'
                     settingName='gen:timeFormat'
-                    value={this.getSettingsValue('timeFormat')}
+                    initialValue={this.getSettingsValue('timeFormat')}
                     width={'60%'}
                   />
                 }
@@ -158,7 +162,7 @@ class GeneralSettings extends React.Component {
                   <InputWithSave
                     stateName='shortDateFormat'
                     settingName='gen:shortDateFormat'
-                    value={this.getSettingsValue('shortDateFormat')}
+                    initialValue={this.getSettingsValue('shortDateFormat')}
                     width={'60%'}
                   />
                 }
@@ -172,7 +176,7 @@ class GeneralSettings extends React.Component {
                   <InputWithSave
                     stateName='longDateFormat'
                     settingName='gen:longDateFormat'
-                    value={this.getSettingsValue('longDateFormat')}
+                    initialValue={this.getSettingsValue('longDateFormat')}
                     width={'60%'}
                   />
                 }
@@ -202,7 +206,4 @@ const mapStateToProps = state => ({
   settings: state.settings.settings
 })
 
-export default connect(
-  mapStateToProps,
-  { updateSetting }
-)(GeneralSettings)
+export default connect(mapStateToProps, { updateSetting })(GeneralSettings)