fix(variable-input): initalContent over placeholder

getpingback · Nov 28, 2024 · e127035 · e127035
1 parent 82a2da5
commit e127035
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/src/components/variable-input/variable-input.stories.tsx b/src/components/variable-input/variable-input.stories.tsx
@@ -47,6 +47,8 @@ export const WithInputProps: Story = {
 
 export const WithInitialContent: Story = {
   args: {
+    label: 'Expression',
+    placeholder: 'Enter the expression',
     initialContent: 'Hello {{name}}! How are you?',
     options
   }

diff --git a/src/components/variable-input/variable-input.test.tsx b/src/components/variable-input/variable-input.test.tsx
@@ -100,4 +100,15 @@ describe('VariableInput Component', () => {
 
     expect(getByText('No results found')).toBeInTheDocument();
   });
+
+  it('should prioritize initialContent over placeholder', () => {
+    const initialContent = 'Initial content';
+    const { container } = render(<VariableInput options={options} initialContent={initialContent} placeholder="Placeholder" />);
+
+    const editor = container.querySelector("[contenteditable='true']");
+    if (editor) {
+      expect(editor.innerHTML).toBe(initialContent);
+      expect(editor.innerHTML).not.toBe('Placeholder');
+    }
+  });
 });
diff --git a/src/components/variable-input/variable-input.tsx b/src/components/variable-input/variable-input.tsx
@@ -216,13 +216,13 @@ export function VariableInput({
     const editor = editorRef.current;
 
     if (editor) {
-      if (!isFocused && !text && placeholder) {
+      if (!isFocused && !text && !initialContent && placeholder) {
         editor.innerHTML = placeholderTag;
       } else if (isFocused && editor.innerHTML === placeholderTag) {
         editor.innerHTML = '';
       }
     }
-  }, [isFocused, text, placeholder]);
+  }, [isFocused, text, placeholder, initialContent]);
 
   React.useEffect(() => {
     if (!open) {