Merge pull request #563 from prezly/fix/dev-13267-dont-use-null-as-a-…

…possible-value-for-fallback

Remove fallback when changing the type instead of using an effect

packages/slate-editor/src/extensions/variables/VariableMenu.tsx

@@ -1,5 +1,5 @@
 import type { VariableNode } from '@prezly/slate-types';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useSlateStatic } from 'slate-react';
 
 import { Button, Input, Menu as BaseMenu, Toolbox, VStack, TooltipV2 } from '#components';
@@ -35,7 +35,12 @@ export function VariableMenu({ container, element, onClose, variables }: Props)
     const option = options.find(({ value }) => value === element.key);
 
     function handleChangeType(newType: string) {
-        updateVariable(editor, { key: newType });
+        const newOption = options.find(({ value }) => value === newType);
+        if (newOption && !newOption.withFallback) {
+            updateVariable(editor, { fallback: '' });
+        } else {
+            updateVariable(editor, { key: newType });
+        }
     }
 
     function handleSave() {
@@ -46,12 +51,6 @@ export function VariableMenu({ container, element, onClose, variables }: Props)
         removeVariable(editor);
     }
 
-    useEffect(() => {
-        if (!option?.withFallback) {
-            updateVariable(editor, { fallback: '' });
-        }
-    }, [option?.withFallback]);
-
     return (
         <Menu
             popperOptions={{ ...popperOptions, modifiers: { arrow: { padding: 0 } } }}