feat: disable save button for unchanged settings (#2259)

closes #1531
Automattic · Mar 2, 2023 · e06d72f · e06d72f
1 parent 5eb2336
commit e06d72f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/assets/components/src/plugin-settings/SettingsSection.js b/assets/components/src/plugin-settings/SettingsSection.js
@@ -5,7 +5,7 @@
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
+import { Fragment, useState } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
@@ -52,6 +52,7 @@ const getControlType = setting => {
 };
 
 const SettingsSection = props => {
+	const [ saveDisabled, setSaveDisabled ] = useState( true );
 	const { error, sectionKey, active, title, description, fields, disabled, onChange, onUpdate } =
 		props;
 	const getControlProps = setting => ( {
@@ -70,6 +71,7 @@ const SettingsSection = props => {
 		checked: setting.type === 'boolean' ? !! setting.value : null,
 		onChange: value => {
 			onChange( setting.key, value );
+			setSaveDisabled( false );
 		},
 	} );
 	const createFilter = ( name, defaultComponent = null ) => {
@@ -100,9 +102,10 @@ const SettingsSection = props => {
 					'buttons',
 					<Button
 						variant="primary"
-						disabled={ disabled }
+						disabled={ disabled || saveDisabled }
 						onClick={ () => {
 							onUpdate();
+							setSaveDisabled( true );
 						} }
 					>
 						{ __( 'Save Settings', 'newspack' ) }

diff --git a/assets/components/src/plugin-settings/index.js b/assets/components/src/plugin-settings/index.js
@@ -90,8 +90,6 @@ class PluginSettings extends Component {
 			},
 		} )
 			.then( settings => {
-				this.setState( { settings, error: null } );
-
 				if ( 'function' === typeof afterUpdate ) {
 					afterUpdate( settings );
 				}