diff --git a/packages/grafana-ui/src/components/SingleStatShared/FieldPropertiesEditor.test.tsx b/packages/grafana-ui/src/components/SingleStatShared/FieldPropertiesEditor.test.tsx new file mode 100644 index 00000000000..6d75fc53d8d --- /dev/null +++ b/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(); + 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, + }); + }); + }); +}); +// diff --git a/packages/grafana-ui/src/components/SingleStatShared/FieldPropertiesEditor.tsx b/packages/grafana-ui/src/components/SingleStatShared/FieldPropertiesEditor.tsx index 9fb7d69df11..5b4aa49cdcc 100644 --- a/packages/grafana-ui/src/components/SingleStatShared/FieldPropertiesEditor.tsx +++ b/packages/grafana-ui/src/components/SingleStatShared/FieldPropertiesEditor.tsx @@ -72,7 +72,7 @@ export const FieldPropertiesEditor: React.FC = ({ value, onChange, showMi min: toFloatOrUndefined(min), max: toFloatOrUndefined(max), }); - }, [min, max, decimals]); + }, [min, max, decimals, value]); const titleTooltip = (
@@ -96,6 +96,7 @@ export const FieldPropertiesEditor: React.FC = ({ 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 = ({ value, onChange, showMi value={min} placeholder="Auto" type="number" + aria-label="Field properties editor min input" /> = ({ value, onChange, showMi value={max} type="number" placeholder="Auto" + aria-label="Field properties editor max input" /> )}