Canvas - Clear button bugfix (#53068)

public/app/features/dimensions/editors/TextDimensionEditor.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import {
   FieldNamePickerConfigSettings,
@@ -30,6 +30,9 @@ export const TextDimensionEditor: FC<StandardEditorProps<TextDimensionConfig, Te
   const { value, context, onChange } = props;
   const labelWidth = 9;
 
+  // force re-render on clear fixed text
+  const [refresh, setRefresh] = useState(0);
+
   const onModeChange = useCallback(
     (mode) => {
       onChange({
@@ -56,15 +59,11 @@ export const TextDimensionEditor: FC<StandardEditorProps<TextDimensionConfig, Te
         ...value,
         fixed,
       });
-    },
-    [onChange, value]
-  );
 
-  const onClearFixedText = () => {
-    // Need to first change to field in order to clear fixed value in editor
-    onChange({ mode: TextDimensionMode.Field, fixed: '', field: '' });
-    onChange({ mode: TextDimensionMode.Fixed, fixed: '', field: '' });
-  };
+      setRefresh(refresh + 1);
+    },
+    [onChange, refresh, value]
+  );
 
   const mode = value?.mode ?? TextDimensionMode.Fixed;
 
@@ -88,19 +87,19 @@ export const TextDimensionEditor: FC<StandardEditorProps<TextDimensionConfig, Te
         </InlineFieldRow>
       )}
       {mode === TextDimensionMode.Fixed && (
-        <InlineFieldRow>
+        <InlineFieldRow key={refresh}>
           <InlineField label={'Value'} labelWidth={labelWidth} grow={true}>
-            <>
-              <StringValueEditor
-                context={context}
-                value={value?.fixed}
-                onChange={onFixedChange}
-                item={dummyStringSettings}
-              />
-              {value?.fixed && (
-                <Button icon="times" variant="secondary" fill="text" size="sm" onClick={onClearFixedText} />
-              )}
-            </>
+            <StringValueEditor
+              context={context}
+              value={value?.fixed}
+              onChange={onFixedChange}
+              item={dummyStringSettings}
+              suffix={
+                value?.fixed && (
+                  <Button icon="times" variant="secondary" fill="text" size="sm" onClick={() => onFixedChange('')} />
+                )
+              }
+            />
           </InlineField>
         </InlineFieldRow>
       )}