diff --git a/public/app/core/components/OptionsUI/string.tsx b/public/app/core/components/OptionsUI/string.tsx
index 36073fcfbe4..771ec887340 100644
--- a/public/app/core/components/OptionsUI/string.tsx
+++ b/public/app/core/components/OptionsUI/string.tsx
@@ -1,15 +1,14 @@
-import React, { useCallback } from 'react';
+import React, { ReactNode, useCallback } from 'react';
 
 import { StandardEditorProps, StringFieldConfigSettings } from '@grafana/data';
 import { Input, TextArea } from '@grafana/ui';
 
-export const StringValueEditor: React.FC<StandardEditorProps<string, StringFieldConfigSettings>> = ({
-  value,
-  onChange,
-  item,
-}) => {
-  const Component = item.settings?.useTextarea ? TextArea : Input;
+interface Props extends StandardEditorProps<string, StringFieldConfigSettings> {
+  suffix?: ReactNode;
+}
 
+export const StringValueEditor: React.FC<Props> = ({ value, onChange, item, suffix }) => {
+  const Component = item.settings?.useTextarea ? TextArea : Input;
   const onValueChange = useCallback(
     (e: React.SyntheticEvent) => {
       let nextValue = value ?? '';
@@ -39,6 +38,7 @@ export const StringValueEditor: React.FC<StandardEditorProps<string, StringField
       rows={(item.settings?.useTextarea && item.settings.rows) || 5}
       onBlur={onValueChange}
       onKeyDown={onValueChange}
+      suffix={suffix}
     />
   );
 };
diff --git a/public/app/features/dimensions/editors/TextDimensionEditor.tsx b/public/app/features/dimensions/editors/TextDimensionEditor.tsx
index 45f38608912..66e7365504c 100644
--- a/public/app/features/dimensions/editors/TextDimensionEditor.tsx
+++ b/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>
       )}