Make sure commit hook in FieldPropertiesEditor is invalidated when value changes (#22673)

packages/grafana-ui/src/components/SingleStatShared/FieldPropertiesEditor.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { FieldPropertiesEditor } from './FieldPropertiesEditor';
+import { FieldConfig } from '@grafana/data';
+import { mount } from 'enzyme';
+
+describe('FieldPropertiesEditor', () => {
+  describe('when bluring min/max field', () => {
+    it("when title was modified it should persist it's value", () => {
+      const onChangeHandler = jest.fn();
+      const value: FieldConfig = {
+        title: 'Title set',
+      };
+      const container = mount(<FieldPropertiesEditor value={value} onChange={onChangeHandler} showTitle showMinMax />);
+      const minInput = container.find('input[aria-label="Field properties editor min input"]');
+      const maxInput = container.find('input[aria-label="Field properties editor max input"]');
+
+      // Simulating title update provided from PanelModel options
+      container.setProps({ value: { title: 'Title updated' } });
+
+      minInput.simulate('blur');
+      maxInput.simulate('blur');
+
+      expect(onChangeHandler).toHaveBeenLastCalledWith({
+        title: 'Title updated',
+        min: undefined,
+        max: undefined,
+        decimals: undefined,
+      });
+    });
+  });
+});
+//

packages/grafana-ui/src/components/SingleStatShared/FieldPropertiesEditor.tsx

@@ -72,7 +72,7 @@ export const FieldPropertiesEditor: React.FC<Props> = ({ value, onChange, showMi
       min: toFloatOrUndefined(min),
       max: toFloatOrUndefined(max),
     });
-  }, [min, max, decimals]);
+  }, [min, max, decimals, value]);
 
   const titleTooltip = (
     <div>
@@ -96,6 +96,7 @@ export const FieldPropertiesEditor: React.FC<Props> = ({ value, onChange, showMi
           value={title}
           tooltip={titleTooltip}
           placeholder="Auto"
+          aria-label="Field properties editor title input"
         />
       )}
 
@@ -113,6 +114,7 @@ export const FieldPropertiesEditor: React.FC<Props> = ({ value, onChange, showMi
             value={min}
             placeholder="Auto"
             type="number"
+            aria-label="Field properties editor min input"
           />
           <FormField
             label="Max"
@@ -122,6 +124,7 @@ export const FieldPropertiesEditor: React.FC<Props> = ({ value, onChange, showMi
             value={max}
             type="number"
             placeholder="Auto"
+            aria-label="Field properties editor max input"
           />
         </>
       )}