ink-prompt 0.1.3 → 0.1.4

package/dist/components/MultilineInput/KeyHandler.js

@@ -17,6 +17,13 @@ const END_SEQUENCES = [
     '\x1bOF', // SS3 F (xterm application mode)
     '\x1b[8~', // CSI 8~ (rxvt)
 ];
+/**
+ * Raw sequences that represent backspace. Some terminals send DEL (0x7f) while others send BS (0x08).
+ */
+const BACKSPACE_SEQUENCES = ['\u0008', '\u007f'];
+function isBackspaceSequence(seq) {
+    return !!seq && BACKSPACE_SEQUENCES.includes(seq);
+}
 /**
  * Handles keyboard input and maps it to text input actions.
  *
@@ -83,7 +90,9 @@ export function handleKey(key, input, buffer, actions, cursor, rawInput) {
         }
     }
     // Editing
-    if (key.backspace) {
+    const rawBackspace = isBackspaceSequence(rawInput);
+    const inputBackspace = isBackspaceSequence(input);
+    if (key.backspace || rawBackspace || inputBackspace || (key.delete && rawBackspace)) {
         actions.delete();
         return;
     }

package/dist/components/MultilineInput/__tests__/KeyHandler.test.js

@@ -71,6 +71,11 @@ describe('KeyHandler', () => {
             handleKey({ delete: true }, '', buffer, actions);
             expect(actions.deleteForward).toHaveBeenCalled();
         });
+        it('treats DEL (0x7f) raw input as backspace even if reported as delete', () => {
+            handleKey({ delete: true }, '', buffer, actions, undefined, '');
+            expect(actions.delete).toHaveBeenCalled();
+            expect(actions.deleteForward).not.toHaveBeenCalled();
+        });
         it('handles Ctrl+J (NewLine)', () => {
             handleKey({ ctrl: true }, 'j', buffer, actions);
             expect(actions.newLine).toHaveBeenCalled();

package/dist/components/MultilineInput/__tests__/integration.test.js

@@ -14,7 +14,7 @@ import { MultilineInputCore } from '../index.js';
  */
 describe('MultilineInputCore', () => {
     describe('Submission', () => {
-        it('clears input after submit', () => {
+        it('clears input when parent updates value prop to empty', () => {
             const onSubmit = vi.fn();
             const onChange = vi.fn();
             // Simulate controlled usage: value is managed by parent
@@ -22,11 +22,14 @@ describe('MultilineInputCore', () => {
             const { rerender, container } = render(_jsx(MultilineInputCore, { value: value, onSubmit: onSubmit, onChange: onChange }));
             // Simulate submit: parent receives value, then clears
             onSubmit(value);
+            onChange.mockClear(); // Clear previous calls
             value = '';
             rerender(_jsx(MultilineInputCore, { value: value, onSubmit: onSubmit, onChange: onChange }));
             // After rerender, input should be empty
             expect(container.textContent).toContain(' '); // Cursor in empty buffer
-            expect(onChange).toHaveBeenCalledWith('');
+            // onChange should NOT be called when parent updates value prop
+            // (this is a prop sync, not user input - controlled component pattern)
+            expect(onChange).not.toHaveBeenCalled();
         });
     });
     describe('Rendering', () => {
@@ -61,11 +64,44 @@ describe('MultilineInputCore', () => {
             expect(container.textContent).toContain('abcde');
             expect(container.textContent).toContain('fghij');
         });
-        it('calls onChange on initial render with value', () => {
+    });
+    describe('Controlled component behavior', () => {
+        it('does NOT call onChange when value prop is updated by parent', () => {
+            // This tests the controlled component pattern:
+            // onChange should only fire for user-initiated changes, not prop updates
+            const onChange = vi.fn();
+            const { rerender, container } = render(_jsx(MultilineInputCore, { value: "initial", onChange: onChange }));
+            expect(container.textContent).toContain('initial');
+            // Clear any calls from initial render
+            onChange.mockClear();
+            // Parent updates the value prop (simulating parent state change)
+            rerender(_jsx(MultilineInputCore, { value: "updated by parent", onChange: onChange }));
+            // The component should sync the new value...
+            expect(container.textContent).toContain('updated by parent');
+            // ...but should NOT call onChange (this is a prop sync, not user input)
+            expect(onChange).not.toHaveBeenCalled();
+        });
+        it('does NOT create feedback loop when parent updates value', () => {
+            // Regression test for feedback loop bug:
+            // 1. Parent calls onChange(newValue)
+            // 2. Parent updates value prop
+            // 3. Component syncs internal state to match prop
+            // 4. BUG: Component calls onChange again with the same value!
+            // 5. This creates an infinite loop
             const onChange = vi.fn();
-            render(_jsx(MultilineInputCore, { value: "test", onChange: onChange }));
-            // onChange is called with the initial value
-            expect(onChange).toHaveBeenCalledWith('test');
+            let externalValue = 'start';
+            const { rerender } = render(_jsx(MultilineInputCore, { value: externalValue, onChange: onChange }));
+            onChange.mockClear();
+            // Simulate what happens after user types and parent updates value prop
+            externalValue = 'user typed this';
+            rerender(_jsx(MultilineInputCore, { value: externalValue, onChange: onChange }));
+            // Should NOT call onChange - this would cause infinite loop
+            expect(onChange).not.toHaveBeenCalled();
+            // Update again
+            externalValue = 'another update';
+            rerender(_jsx(MultilineInputCore, { value: externalValue, onChange: onChange }));
+            // Still should not call onChange
+            expect(onChange).not.toHaveBeenCalled();
         });
     });
     describe('Placeholder', () => {

package/dist/components/MultilineInput/index.js

@@ -12,6 +12,8 @@ import { log } from '../../utils/logger.js';
  */
 export const MultilineInputCore = ({ value, onChange, placeholder, showCursor = true, width = 80, onCursorChange, cursorOverride, }) => {
     const textInput = useTextInput({ initialValue: value ?? '' });
+    // Track whether a value change is from syncing props (not user input)
+    const isSyncingFromProps = useRef(false);
     // Handle cursor override
     useEffect(() => {
         if (cursorOverride !== undefined) {
@@ -32,13 +34,23 @@ export const MultilineInputCore = ({ value, onChange, placeholder, showCursor =
     // Sync external value changes
     useEffect(() => {
         if (value !== undefined && value !== textInput.value) {
+            isSyncingFromProps.current = true;
             textInput.setText(value);
         }
     }, [value]);
-    // Notify parent of changes
+    // Notify parent of changes - but only for user-initiated changes
+    const onChangeRef = useRef(onChange);
     useEffect(() => {
-        onChange?.(textInput.value);
-    }, [textInput.value, onChange]);
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    useEffect(() => {
+        if (isSyncingFromProps.current) {
+            // This change was from syncing props, not user input - don't call onChange
+            isSyncingFromProps.current = false;
+            return;
+        }
+        onChangeRef.current?.(textInput.value);
+    }, [textInput.value]);
     // Create buffer for TextRenderer
     const buffer = createBuffer(textInput.value);
     // Show placeholder if empty and no cursor shown
@@ -87,16 +99,28 @@ export const MultilineInput = ({ value, onChange, onSubmit, placeholder, showCur
     useEffect(() => {
         onCursorChangeRef.current?.(textInput.cursorOffset);
     }, [textInput.cursorOffset]);
+    // Track whether a value change is from syncing props (not user input)
+    const isSyncingFromProps = useRef(false);
     // Sync external value changes
     useEffect(() => {
         if (value !== undefined && value !== textInput.value) {
+            isSyncingFromProps.current = true;
             textInput.setText(value);
         }
     }, [value]);
-    // Notify parent of changes
+    // Notify parent of changes - but only for user-initiated changes
+    const onChangeRef = useRef(onChange);
     useEffect(() => {
-        onChange?.(textInput.value);
-    }, [textInput.value, onChange]);
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    useEffect(() => {
+        if (isSyncingFromProps.current) {
+            // This change was from syncing props, not user input - don't call onChange
+            isSyncingFromProps.current = false;
+            return;
+        }
+        onChangeRef.current?.(textInput.value);
+    }, [textInput.value]);
     // Create buffer for TextRenderer and KeyHandler
     const buffer = createBuffer(textInput.value);
     // Create submit handler

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ink-prompt",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A React Ink component for prompts",
   "type": "module",
   "main": "./dist/index.js",