Skip to content

fix(PhoneInput): preserve cursor position and text selection during f…#183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jaruesink merged 8 commits into from
Jul 29, 2026
Merged

fix(PhoneInput): preserve cursor position and text selection during f… #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3a37cf8
fix(PhoneInput): preserve cursor position and text selection during f…
faraz-zakai-360training Jul 23, 2026
d2cab49
fix: address Currybot ref forwarding and focused update issues
faraz-zakai-360training Jul 24, 2026
ff1a171
feat: add comprehensive test coverage and improve documentation
faraz-zakai-360training Jul 24, 2026
fc9568a
fix: address CodeRabbit review findings
faraz-zakai-360training Jul 24, 2026
7a17b19
fix: correct React 19 callback ref cleanup contract
faraz-zakai-360training Jul 27, 2026
01c45cc
fix: apply Biome formatting to phone-input test
faraz-zakai-360training Jul 27, 2026
117f3ea
fix: apply Biome formatting to checkbox-field.tsx
faraz-zakai-360training Jul 28, 2026
c79cc5e
chore: add patch changeset for phone input fix
jaruesink Jul 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/phone-input-selection.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
"@lambdacurry/forms": patch
---

Fix phone input cursor positioning and text selection.
337 changes: 337 additions & 0 deletions apps/docs/src/remix-hook-form/phone-input.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import { z } from 'zod';
import type { ElementType } from 'react';
import type { FetcherWithComponents } from 'react-router';
import type { FormMessageProps } from '@lambdacurry/forms/ui/form';
import { useRef, useEffect } from 'react';

// Mock useFetcher
jest.mock('react-router', () => ({
Expand DownExpand Up@@ -186,4 +187,340 @@ describe('PhoneInput Component', () => {
expect(screen.getByLabelText('International Phone Number')).toBeInTheDocument();
});
});

describe('MI-1188: Selection Replacement and Cursor Positioning', () => {
it('replaces selected middle digits when typing (AC #1)', async () => {
const user = userEvent.setup();
render(<TestPhoneInputForm />);

const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

// Type initial number
await user.type(input, '2025550123');
await waitFor(() => {
expect(input.value).toBe('(202) 555-0123');
});

// Select middle digits "555" (positions 6-8 in formatted string "(202) 555-0123")
input.focus();
input.setSelectionRange(6, 9);

// Type replacement digits
await user.keyboard('999');

// Should replace selected "555" with "999"
await waitFor(() => {
expect(input.value).toBe('(202) 999-0123');
});
});

it('replaces entire number when all text selected (AC #2)', async () => {
const user = userEvent.setup();
render(<TestPhoneInputForm />);

const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

// Type initial number
await user.type(input, '2025550123');
await waitFor(() => {
expect(input.value).toBe('(202) 555-0123');
});

// Select all text
input.focus();
input.setSelectionRange(0, input.value.length);

// Type new number
await user.keyboard('310');

// Should replace entire value
await waitFor(() => {
expect(input.value).toBe('(310');
});
});

it('maintains cursor position after formatting during typing', async () => {
const user = userEvent.setup();
render(<TestPhoneInputForm />);

const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

// Type partial number
await user.type(input, '202555');

await waitFor(() => {
expect(input.value).toBe('(202) 555');
// Cursor should be at exact position after last digit (after "555")
expect(input.selectionStart).toBe(9); // "(202) 555" length
});
});

it('handles backspace correctly with cursor positioning', async () => {
const user = userEvent.setup();
render(<TestPhoneInputForm />);

const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

// Type full number
await user.type(input, '2025550123');
await waitFor(() => {
expect(input.value).toBe('(202) 555-0123');
});

// Backspace once
await user.keyboard('{Backspace}');

await waitFor(() => {
expect(input.value).toBe('(202) 555-012');
});
});
});

describe('Paste Events', () => {
it('formats pasted plain digits correctly', async () => {
const user = userEvent.setup();
render(<TestPhoneInputForm />);

const input = screen.getByLabelText('USA Phone Number');

await user.click(input);
await user.paste('2025550123');

await waitFor(() => {
expect((input as HTMLInputElement).value).toBe('(202) 555-0123');
});
});

it('handles pasted formatted number', async () => {
const user = userEvent.setup();
render(<TestPhoneInputForm />);

const input = screen.getByLabelText('USA Phone Number');

await user.click(input);
await user.paste('(202) 555-0123');

await waitFor(() => {
expect((input as HTMLInputElement).value).toBe('(202) 555-0123');
});
});

it('handles paste with selection replacement', async () => {
const user = userEvent.setup();
render(<TestPhoneInputForm />);

const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

// Type initial number
await user.type(input, '2025550123');
await waitFor(() => {
expect(input.value).toBe('(202) 555-0123');
});

// Select middle portion
input.focus();
input.setSelectionRange(6, 9);

// Paste replacement
await user.paste('999');

await waitFor(() => {
expect(input.value).toBe('(202) 999-0123');
});
});
});

describe('Ref Forwarding (React 19 Compliance)', () => {
it('forwards ref correctly to input element', () => {
const TestRefComponent = () => {
const ref = useRef<HTMLInputElement>(null);
const mockFetcher = {
data: {},
state: 'idle' as const,
submit: jest.fn(),
Form: 'form' as ElementType,
} as unknown as FetcherWithComponents<unknown>;

mockUseFetcher.mockReturnValue(mockFetcher);

const methods = useRemixForm<TestFormData>({
resolver: zodResolver(testSchema),
defaultValues: { usaPhone: '', internationalPhone: '' },
fetcher: mockFetcher,
submitConfig: { action: '/test', method: 'post' },
});

return (
<RemixFormProvider {...methods}>
<form>
<PhoneInput name="usaPhone" label="Phone" ref={ref} />
<div data-testid="ref-check">{ref.current ? 'ref-attached' : 'no-ref'}</div>
</form>
</RemixFormProvider>
);
};

const { rerender } = render(<TestRefComponent />);

// Trigger rerender to ensure ref is attached
rerender(<TestRefComponent />);

const refCheck = screen.getByTestId('ref-check');
expect(refCheck.textContent).toBe('ref-attached');
});
Comment thread
coderabbitai[bot] marked this conversation as resolved.

it('calls callback ref cleanup on unmount', () => {
const cleanup = jest.fn();
const callbackRef = jest.fn(() => cleanup);

const TestRefComponent = () => {
const mockFetcher = {
data: {},
state: 'idle' as const,
submit: jest.fn(),
Form: 'form' as ElementType,
} as unknown as FetcherWithComponents<unknown>;

mockUseFetcher.mockReturnValue(mockFetcher);

const methods = useRemixForm<TestFormData>({
resolver: zodResolver(testSchema),
defaultValues: { usaPhone: '', internationalPhone: '' },
fetcher: mockFetcher,
submitConfig: { action: '/test', method: 'post' },
});

return (
<RemixFormProvider {...methods}>
<form>
<PhoneInput name="usaPhone" label="Phone" ref={callbackRef} />
</form>
</RemixFormProvider>
);
};

const { unmount } = render(<TestRefComponent />);

expect(callbackRef).toHaveBeenCalledWith(expect.any(HTMLInputElement));
expect(callbackRef).toHaveBeenCalledTimes(1);

unmount();

expect(cleanup).toHaveBeenCalled();
// React 19: cleanup-returning callback should NOT be called with null
expect(callbackRef).toHaveBeenCalledTimes(1); // Still only 1 call
expect(callbackRef).not.toHaveBeenCalledWith(null);
});
});

describe('Focus/Blur Value Synchronization', () => {
it('defers external value updates while focused', async () => {
const TestValueSyncComponent = ({ value }: { value: string }) => {
const mockFetcher = {
data: {},
state: 'idle' as const,
submit: jest.fn(),
Form: 'form' as ElementType,
} as unknown as FetcherWithComponents<unknown>;

mockUseFetcher.mockReturnValue(mockFetcher);

const methods = useRemixForm<TestFormData>({
resolver: zodResolver(testSchema),
defaultValues: { usaPhone: value, internationalPhone: '' },
fetcher: mockFetcher,
submitConfig: { action: '/test', method: 'post' },
});

useEffect(() => {
methods.setValue('usaPhone', value);
}, [value, methods]);

return (
<RemixFormProvider {...methods}>
<form>
<PhoneInput name="usaPhone" label="Phone" />
</form>
</RemixFormProvider>
);
};

const user = userEvent.setup();
const { rerender } = render(<TestValueSyncComponent value="2025550100" />);

const input = screen.getByLabelText('Phone') as HTMLInputElement;

await waitFor(() => {
expect(input.value).toBe('(202) 555-0100');
});

// Focus the input
await user.click(input);
expect(input).toHaveFocus();

// External value change while focused
rerender(<TestValueSyncComponent value="3105550200" />);

// Should still show old value while focused
await waitFor(() => {
expect(input.value).toBe('(202) 555-0100');
});

// Blur the input
await user.tab();

// Should now show new value after blur
await waitFor(() => {
expect(input.value).toBe('(310) 555-0200');
});
});

it('applies external value updates immediately when not focused', async () => {
const TestValueSyncComponent = ({ value }: { value: string }) => {
const mockFetcher = {
data: {},
state: 'idle' as const,
submit: jest.fn(),
Form: 'form' as ElementType,
} as unknown as FetcherWithComponents<unknown>;

mockUseFetcher.mockReturnValue(mockFetcher);

const methods = useRemixForm<TestFormData>({
resolver: zodResolver(testSchema),
defaultValues: { usaPhone: value, internationalPhone: '' },
fetcher: mockFetcher,
submitConfig: { action: '/test', method: 'post' },
});

useEffect(() => {
methods.setValue('usaPhone', value);
}, [value, methods]);

return (
<RemixFormProvider {...methods}>
<form>
<PhoneInput name="usaPhone" label="Phone" />
</form>
</RemixFormProvider>
);
};

const { rerender } = render(<TestValueSyncComponent value="2025550100" />);

const input = screen.getByLabelText('Phone') as HTMLInputElement;

await waitFor(() => {
expect(input.value).toBe('(202) 555-0100');
});

// External value change while NOT focused
rerender(<TestValueSyncComponent value="3105550200" />);

// Should apply new value immediately
await waitFor(() => {
expect(input.value).toBe('(310) 555-0200');
});
});
});
});
6 changes: 5 additions & 1 deletion packages/components/src/ui/checkbox-field.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -68,7 +68,11 @@ const CheckboxField = ({

return (
<FormItem
className={cn('flex flex-row gap-3 space-y-0', hasSupportingText ? 'items-start' : 'items-center', className)}
className={cn(
'flex flex-row gap-3 space-y-0',
hasSupportingText ? 'items-start' : 'items-center',
className,
)}
>
<FormControl Component={components?.FormControl}>
<CheckboxComponent
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
fix(PhoneInput): preserve cursor position and text selection during f… by faraz-zakai-360training · Pull Request #183 · lambda-curry/forms · GitHub
Skip to content
fix(PhoneInput): preserve cursor position and text selection during f…#183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jaruesink
merged 8 commits into

from

Jul 29, 2026
 Merged


fix(PhoneInput): preserve cursor position and text selection during f…
#183
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


8 commits


Select commit
Hold shift + click to select a range
3a37cf8

fix(PhoneInput): preserve cursor position and text selection during f…


faraz-zakai-360training Jul 23, 2026
d2cab49

fix: address Currybot ref forwarding and focused update issues


faraz-zakai-360training Jul 24, 2026
ff1a171

feat: add comprehensive test coverage and improve documentation


faraz-zakai-360training Jul 24, 2026
fc9568a

fix: address CodeRabbit review findings


faraz-zakai-360training Jul 24, 2026
7a17b19

fix: correct React 19 callback ref cleanup contract


faraz-zakai-360training Jul 27, 2026
01c45cc

fix: apply Biome formatting to phone-input test


faraz-zakai-360training Jul 27, 2026
117f3ea

fix: apply Biome formatting to checkbox-field.tsx


faraz-zakai-360training Jul 28, 2026
c79cc5e

chore: add patch changeset for phone input fix


jaruesink Jul 29, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/phone-input-selection.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
"@lambdacurry/forms": patch
---

Fix phone input cursor positioning and text selection.

337 changes: 337 additions & 0 deletions
apps/docs/src/remix-hook-form/phone-input.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import { z } from 'zod';
import type { ElementType } from 'react';
import type { FetcherWithComponents } from 'react-router';
import type { FormMessageProps } from '@lambdacurry/forms/ui/form';
import { useRef, useEffect } from 'react';

// Mock useFetcher
jest.mock('react-router', () => ({
Expand DownExpand Up@@ -186,4 +187,340 @@ describe('PhoneInput Component', () => {
 expect(screen.getByLabelText('International Phone Number')).toBeInTheDocument();
 });
 });

 describe('MI-1188: Selection Replacement and Cursor Positioning', () => {
 it('replaces selected middle digits when typing (AC #1)', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select middle digits "555" (positions 6-8 in formatted string "(202) 555-0123")
 input.focus();
 input.setSelectionRange(6, 9);

 // Type replacement digits
 await user.keyboard('999');

 // Should replace selected "555" with "999"
 await waitFor(() => {
 expect(input.value).toBe('(202) 999-0123');
 });
 });

 it('replaces entire number when all text selected (AC #2)', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select all text
 input.focus();
 input.setSelectionRange(0, input.value.length);

 // Type new number
 await user.keyboard('310');

 // Should replace entire value
 await waitFor(() => {
 expect(input.value).toBe('(310');
 });
 });

 it('maintains cursor position after formatting during typing', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type partial number
 await user.type(input, '202555');

 await waitFor(() => {
 expect(input.value).toBe('(202) 555');
 // Cursor should be at exact position after last digit (after "555")
 expect(input.selectionStart).toBe(9); // "(202) 555" length
 });
 });

 it('handles backspace correctly with cursor positioning', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type full number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Backspace once
 await user.keyboard('{Backspace}');

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-012');
 });
 });
 });

 describe('Paste Events', () => {
 it('formats pasted plain digits correctly', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number');

 await user.click(input);
 await user.paste('2025550123');

 await waitFor(() => {
 expect((input as HTMLInputElement).value).toBe('(202) 555-0123');
 });
 });

 it('handles pasted formatted number', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number');

 await user.click(input);
 await user.paste('(202) 555-0123');

 await waitFor(() => {
 expect((input as HTMLInputElement).value).toBe('(202) 555-0123');
 });
 });

 it('handles paste with selection replacement', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select middle portion
 input.focus();
 input.setSelectionRange(6, 9);

 // Paste replacement
 await user.paste('999');

 await waitFor(() => {
 expect(input.value).toBe('(202) 999-0123');
 });
 });
 });

 describe('Ref Forwarding (React 19 Compliance)', () => {
 it('forwards ref correctly to input element', () => {
 const TestRefComponent = () => {
 const ref = useRef<HTMLInputElement>(null);
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: '', internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" ref={ref} />
 <div data-testid="ref-check">{ref.current ? 'ref-attached' : 'no-ref'}</div>
 </form>
 </RemixFormProvider>
 );
 };

 const { rerender } = render(<TestRefComponent />);

 // Trigger rerender to ensure ref is attached
 rerender(<TestRefComponent />);

 const refCheck = screen.getByTestId('ref-check');
 expect(refCheck.textContent).toBe('ref-attached');
 });
Comment thread
coderabbitai[bot] marked this conversation as resolved.


 it('calls callback ref cleanup on unmount', () => {
 const cleanup = jest.fn();
 const callbackRef = jest.fn(() => cleanup);

 const TestRefComponent = () => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: '', internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" ref={callbackRef} />
 </form>
 </RemixFormProvider>
 );
 };

 const { unmount } = render(<TestRefComponent />);

 expect(callbackRef).toHaveBeenCalledWith(expect.any(HTMLInputElement));
 expect(callbackRef).toHaveBeenCalledTimes(1);

 unmount();

 expect(cleanup).toHaveBeenCalled();
 // React 19: cleanup-returning callback should NOT be called with null
 expect(callbackRef).toHaveBeenCalledTimes(1); // Still only 1 call
 expect(callbackRef).not.toHaveBeenCalledWith(null);
 });
 });

 describe('Focus/Blur Value Synchronization', () => {
 it('defers external value updates while focused', async () => {
 const TestValueSyncComponent = ({ value }: { value: string }) => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: value, internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 useEffect(() => {
 methods.setValue('usaPhone', value);
 }, [value, methods]);

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" />
 </form>
 </RemixFormProvider>
 );
 };

 const user = userEvent.setup();
 const { rerender } = render(<TestValueSyncComponent value="2025550100" />);

 const input = screen.getByLabelText('Phone') as HTMLInputElement;

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // Focus the input
 await user.click(input);
 expect(input).toHaveFocus();

 // External value change while focused
 rerender(<TestValueSyncComponent value="3105550200" />);

 // Should still show old value while focused
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // Blur the input
 await user.tab();

 // Should now show new value after blur
 await waitFor(() => {
 expect(input.value).toBe('(310) 555-0200');
 });
 });

 it('applies external value updates immediately when not focused', async () => {
 const TestValueSyncComponent = ({ value }: { value: string }) => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: value, internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 useEffect(() => {
 methods.setValue('usaPhone', value);
 }, [value, methods]);

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" />
 </form>
 </RemixFormProvider>
 );
 };

 const { rerender } = render(<TestValueSyncComponent value="2025550100" />);

 const input = screen.getByLabelText('Phone') as HTMLInputElement;

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // External value change while NOT focused
 rerender(<TestValueSyncComponent value="3105550200" />);

 // Should apply new value immediately
 await waitFor(() => {
 expect(input.value).toBe('(310) 555-0200');
 });
 });
 });
});

6 changes: 5 additions & 1 deletion
packages/components/src/ui/checkbox-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -68,7 +68,11 @@ const CheckboxField = ({

 return (
 <FormItem
 className={cn('flex flex-row gap-3 space-y-0', hasSupportingText ? 'items-start' : 'items-center', className)}
 className={cn(
 'flex flex-row gap-3 space-y-0',
 hasSupportingText ? 'items-start' : 'items-center',
 className,
 )}
 >
 <FormControl Component={components?.FormControl}>
 <CheckboxComponent
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
fix(PhoneInput): preserve cursor position and text selection during f… by faraz-zakai-360training · Pull Request #183 · lambda-curry/forms · GitHub
Skip to content
fix(PhoneInput): preserve cursor position and text selection during f…#183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jaruesink
merged 8 commits into

from

Jul 29, 2026
 Merged


fix(PhoneInput): preserve cursor position and text selection during f…
#183
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


8 commits


Select commit
Hold shift + click to select a range
3a37cf8

fix(PhoneInput): preserve cursor position and text selection during f…


faraz-zakai-360training Jul 23, 2026
d2cab49

fix: address Currybot ref forwarding and focused update issues


faraz-zakai-360training Jul 24, 2026
ff1a171

feat: add comprehensive test coverage and improve documentation


faraz-zakai-360training Jul 24, 2026
fc9568a

fix: address CodeRabbit review findings


faraz-zakai-360training Jul 24, 2026
7a17b19

fix: correct React 19 callback ref cleanup contract


faraz-zakai-360training Jul 27, 2026
01c45cc

fix: apply Biome formatting to phone-input test


faraz-zakai-360training Jul 27, 2026
117f3ea

fix: apply Biome formatting to checkbox-field.tsx


faraz-zakai-360training Jul 28, 2026
c79cc5e

chore: add patch changeset for phone input fix


jaruesink Jul 29, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/phone-input-selection.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
"@lambdacurry/forms": patch
---

Fix phone input cursor positioning and text selection.

337 changes: 337 additions & 0 deletions
apps/docs/src/remix-hook-form/phone-input.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import { z } from 'zod';
import type { ElementType } from 'react';
import type { FetcherWithComponents } from 'react-router';
import type { FormMessageProps } from '@lambdacurry/forms/ui/form';
import { useRef, useEffect } from 'react';

// Mock useFetcher
jest.mock('react-router', () => ({
Expand DownExpand Up@@ -186,4 +187,340 @@ describe('PhoneInput Component', () => {
 expect(screen.getByLabelText('International Phone Number')).toBeInTheDocument();
 });
 });

 describe('MI-1188: Selection Replacement and Cursor Positioning', () => {
 it('replaces selected middle digits when typing (AC #1)', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select middle digits "555" (positions 6-8 in formatted string "(202) 555-0123")
 input.focus();
 input.setSelectionRange(6, 9);

 // Type replacement digits
 await user.keyboard('999');

 // Should replace selected "555" with "999"
 await waitFor(() => {
 expect(input.value).toBe('(202) 999-0123');
 });
 });

 it('replaces entire number when all text selected (AC #2)', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select all text
 input.focus();
 input.setSelectionRange(0, input.value.length);

 // Type new number
 await user.keyboard('310');

 // Should replace entire value
 await waitFor(() => {
 expect(input.value).toBe('(310');
 });
 });

 it('maintains cursor position after formatting during typing', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type partial number
 await user.type(input, '202555');

 await waitFor(() => {
 expect(input.value).toBe('(202) 555');
 // Cursor should be at exact position after last digit (after "555")
 expect(input.selectionStart).toBe(9); // "(202) 555" length
 });
 });

 it('handles backspace correctly with cursor positioning', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type full number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Backspace once
 await user.keyboard('{Backspace}');

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-012');
 });
 });
 });

 describe('Paste Events', () => {
 it('formats pasted plain digits correctly', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number');

 await user.click(input);
 await user.paste('2025550123');

 await waitFor(() => {
 expect((input as HTMLInputElement).value).toBe('(202) 555-0123');
 });
 });

 it('handles pasted formatted number', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number');

 await user.click(input);
 await user.paste('(202) 555-0123');

 await waitFor(() => {
 expect((input as HTMLInputElement).value).toBe('(202) 555-0123');
 });
 });

 it('handles paste with selection replacement', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select middle portion
 input.focus();
 input.setSelectionRange(6, 9);

 // Paste replacement
 await user.paste('999');

 await waitFor(() => {
 expect(input.value).toBe('(202) 999-0123');
 });
 });
 });

 describe('Ref Forwarding (React 19 Compliance)', () => {
 it('forwards ref correctly to input element', () => {
 const TestRefComponent = () => {
 const ref = useRef<HTMLInputElement>(null);
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: '', internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" ref={ref} />
 <div data-testid="ref-check">{ref.current ? 'ref-attached' : 'no-ref'}</div>
 </form>
 </RemixFormProvider>
 );
 };

 const { rerender } = render(<TestRefComponent />);

 // Trigger rerender to ensure ref is attached
 rerender(<TestRefComponent />);

 const refCheck = screen.getByTestId('ref-check');
 expect(refCheck.textContent).toBe('ref-attached');
 });
Comment thread
coderabbitai[bot] marked this conversation as resolved.


 it('calls callback ref cleanup on unmount', () => {
 const cleanup = jest.fn();
 const callbackRef = jest.fn(() => cleanup);

 const TestRefComponent = () => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: '', internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" ref={callbackRef} />
 </form>
 </RemixFormProvider>
 );
 };

 const { unmount } = render(<TestRefComponent />);

 expect(callbackRef).toHaveBeenCalledWith(expect.any(HTMLInputElement));
 expect(callbackRef).toHaveBeenCalledTimes(1);

 unmount();

 expect(cleanup).toHaveBeenCalled();
 // React 19: cleanup-returning callback should NOT be called with null
 expect(callbackRef).toHaveBeenCalledTimes(1); // Still only 1 call
 expect(callbackRef).not.toHaveBeenCalledWith(null);
 });
 });

 describe('Focus/Blur Value Synchronization', () => {
 it('defers external value updates while focused', async () => {
 const TestValueSyncComponent = ({ value }: { value: string }) => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: value, internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 useEffect(() => {
 methods.setValue('usaPhone', value);
 }, [value, methods]);

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" />
 </form>
 </RemixFormProvider>
 );
 };

 const user = userEvent.setup();
 const { rerender } = render(<TestValueSyncComponent value="2025550100" />);

 const input = screen.getByLabelText('Phone') as HTMLInputElement;

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // Focus the input
 await user.click(input);
 expect(input).toHaveFocus();

 // External value change while focused
 rerender(<TestValueSyncComponent value="3105550200" />);

 // Should still show old value while focused
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // Blur the input
 await user.tab();

 // Should now show new value after blur
 await waitFor(() => {
 expect(input.value).toBe('(310) 555-0200');
 });
 });

 it('applies external value updates immediately when not focused', async () => {
 const TestValueSyncComponent = ({ value }: { value: string }) => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: value, internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 useEffect(() => {
 methods.setValue('usaPhone', value);
 }, [value, methods]);

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" />
 </form>
 </RemixFormProvider>
 );
 };

 const { rerender } = render(<TestValueSyncComponent value="2025550100" />);

 const input = screen.getByLabelText('Phone') as HTMLInputElement;

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // External value change while NOT focused
 rerender(<TestValueSyncComponent value="3105550200" />);

 // Should apply new value immediately
 await waitFor(() => {
 expect(input.value).toBe('(310) 555-0200');
 });
 });
 });
});

6 changes: 5 additions & 1 deletion
packages/components/src/ui/checkbox-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -68,7 +68,11 @@ const CheckboxField = ({

 return (
 <FormItem
 className={cn('flex flex-row gap-3 space-y-0', hasSupportingText ? 'items-start' : 'items-center', className)}
 className={cn(
 'flex flex-row gap-3 space-y-0',
 hasSupportingText ? 'items-start' : 'items-center',
 className,
 )}
 >
 <FormControl Component={components?.FormControl}>
 <CheckboxComponent
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
fix(PhoneInput): preserve cursor position and text selection during f… by faraz-zakai-360training · Pull Request #183 · lambda-curry/forms · GitHub
Skip to content
fix(PhoneInput): preserve cursor position and text selection during f…#183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jaruesink
merged 8 commits into

from

Jul 29, 2026
 Merged


fix(PhoneInput): preserve cursor position and text selection during f…
#183
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


8 commits


Select commit
Hold shift + click to select a range
3a37cf8

fix(PhoneInput): preserve cursor position and text selection during f…


faraz-zakai-360training Jul 23, 2026
d2cab49

fix: address Currybot ref forwarding and focused update issues


faraz-zakai-360training Jul 24, 2026
ff1a171

feat: add comprehensive test coverage and improve documentation


faraz-zakai-360training Jul 24, 2026
fc9568a

fix: address CodeRabbit review findings


faraz-zakai-360training Jul 24, 2026
7a17b19

fix: correct React 19 callback ref cleanup contract


faraz-zakai-360training Jul 27, 2026
01c45cc

fix: apply Biome formatting to phone-input test


faraz-zakai-360training Jul 27, 2026
117f3ea

fix: apply Biome formatting to checkbox-field.tsx


faraz-zakai-360training Jul 28, 2026
c79cc5e

chore: add patch changeset for phone input fix


jaruesink Jul 29, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/phone-input-selection.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
"@lambdacurry/forms": patch
---

Fix phone input cursor positioning and text selection.

337 changes: 337 additions & 0 deletions
apps/docs/src/remix-hook-form/phone-input.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import { z } from 'zod';
import type { ElementType } from 'react';
import type { FetcherWithComponents } from 'react-router';
import type { FormMessageProps } from '@lambdacurry/forms/ui/form';
import { useRef, useEffect } from 'react';

// Mock useFetcher
jest.mock('react-router', () => ({
Expand DownExpand Up@@ -186,4 +187,340 @@ describe('PhoneInput Component', () => {
 expect(screen.getByLabelText('International Phone Number')).toBeInTheDocument();
 });
 });

 describe('MI-1188: Selection Replacement and Cursor Positioning', () => {
 it('replaces selected middle digits when typing (AC #1)', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select middle digits "555" (positions 6-8 in formatted string "(202) 555-0123")
 input.focus();
 input.setSelectionRange(6, 9);

 // Type replacement digits
 await user.keyboard('999');

 // Should replace selected "555" with "999"
 await waitFor(() => {
 expect(input.value).toBe('(202) 999-0123');
 });
 });

 it('replaces entire number when all text selected (AC #2)', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select all text
 input.focus();
 input.setSelectionRange(0, input.value.length);

 // Type new number
 await user.keyboard('310');

 // Should replace entire value
 await waitFor(() => {
 expect(input.value).toBe('(310');
 });
 });

 it('maintains cursor position after formatting during typing', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type partial number
 await user.type(input, '202555');

 await waitFor(() => {
 expect(input.value).toBe('(202) 555');
 // Cursor should be at exact position after last digit (after "555")
 expect(input.selectionStart).toBe(9); // "(202) 555" length
 });
 });

 it('handles backspace correctly with cursor positioning', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type full number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Backspace once
 await user.keyboard('{Backspace}');

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-012');
 });
 });
 });

 describe('Paste Events', () => {
 it('formats pasted plain digits correctly', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number');

 await user.click(input);
 await user.paste('2025550123');

 await waitFor(() => {
 expect((input as HTMLInputElement).value).toBe('(202) 555-0123');
 });
 });

 it('handles pasted formatted number', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number');

 await user.click(input);
 await user.paste('(202) 555-0123');

 await waitFor(() => {
 expect((input as HTMLInputElement).value).toBe('(202) 555-0123');
 });
 });

 it('handles paste with selection replacement', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select middle portion
 input.focus();
 input.setSelectionRange(6, 9);

 // Paste replacement
 await user.paste('999');

 await waitFor(() => {
 expect(input.value).toBe('(202) 999-0123');
 });
 });
 });

 describe('Ref Forwarding (React 19 Compliance)', () => {
 it('forwards ref correctly to input element', () => {
 const TestRefComponent = () => {
 const ref = useRef<HTMLInputElement>(null);
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: '', internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" ref={ref} />
 <div data-testid="ref-check">{ref.current ? 'ref-attached' : 'no-ref'}</div>
 </form>
 </RemixFormProvider>
 );
 };

 const { rerender } = render(<TestRefComponent />);

 // Trigger rerender to ensure ref is attached
 rerender(<TestRefComponent />);

 const refCheck = screen.getByTestId('ref-check');
 expect(refCheck.textContent).toBe('ref-attached');
 });
Comment thread
coderabbitai[bot] marked this conversation as resolved.


 it('calls callback ref cleanup on unmount', () => {
 const cleanup = jest.fn();
 const callbackRef = jest.fn(() => cleanup);

 const TestRefComponent = () => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: '', internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" ref={callbackRef} />
 </form>
 </RemixFormProvider>
 );
 };

 const { unmount } = render(<TestRefComponent />);

 expect(callbackRef).toHaveBeenCalledWith(expect.any(HTMLInputElement));
 expect(callbackRef).toHaveBeenCalledTimes(1);

 unmount();

 expect(cleanup).toHaveBeenCalled();
 // React 19: cleanup-returning callback should NOT be called with null
 expect(callbackRef).toHaveBeenCalledTimes(1); // Still only 1 call
 expect(callbackRef).not.toHaveBeenCalledWith(null);
 });
 });

 describe('Focus/Blur Value Synchronization', () => {
 it('defers external value updates while focused', async () => {
 const TestValueSyncComponent = ({ value }: { value: string }) => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: value, internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 useEffect(() => {
 methods.setValue('usaPhone', value);
 }, [value, methods]);

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" />
 </form>
 </RemixFormProvider>
 );
 };

 const user = userEvent.setup();
 const { rerender } = render(<TestValueSyncComponent value="2025550100" />);

 const input = screen.getByLabelText('Phone') as HTMLInputElement;

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // Focus the input
 await user.click(input);
 expect(input).toHaveFocus();

 // External value change while focused
 rerender(<TestValueSyncComponent value="3105550200" />);

 // Should still show old value while focused
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // Blur the input
 await user.tab();

 // Should now show new value after blur
 await waitFor(() => {
 expect(input.value).toBe('(310) 555-0200');
 });
 });

 it('applies external value updates immediately when not focused', async () => {
 const TestValueSyncComponent = ({ value }: { value: string }) => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: value, internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 useEffect(() => {
 methods.setValue('usaPhone', value);
 }, [value, methods]);

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" />
 </form>
 </RemixFormProvider>
 );
 };

 const { rerender } = render(<TestValueSyncComponent value="2025550100" />);

 const input = screen.getByLabelText('Phone') as HTMLInputElement;

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // External value change while NOT focused
 rerender(<TestValueSyncComponent value="3105550200" />);

 // Should apply new value immediately
 await waitFor(() => {
 expect(input.value).toBe('(310) 555-0200');
 });
 });
 });
});

6 changes: 5 additions & 1 deletion
packages/components/src/ui/checkbox-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -68,7 +68,11 @@ const CheckboxField = ({

 return (
 <FormItem
 className={cn('flex flex-row gap-3 space-y-0', hasSupportingText ? 'items-start' : 'items-center', className)}
 className={cn(
 'flex flex-row gap-3 space-y-0',
 hasSupportingText ? 'items-start' : 'items-center',
 className,
 )}
 >
 <FormControl Component={components?.FormControl}>
 <CheckboxComponent
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
fix(PhoneInput): preserve cursor position and text selection during f… by faraz-zakai-360training · Pull Request #183 · lambda-curry/forms · GitHub
Skip to content
fix(PhoneInput): preserve cursor position and text selection during f…#183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jaruesink
merged 8 commits into

from

Jul 29, 2026
 Merged


fix(PhoneInput): preserve cursor position and text selection during f…
#183
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


8 commits


Select commit
Hold shift + click to select a range
3a37cf8

fix(PhoneInput): preserve cursor position and text selection during f…


faraz-zakai-360training Jul 23, 2026
d2cab49

fix: address Currybot ref forwarding and focused update issues


faraz-zakai-360training Jul 24, 2026
ff1a171

feat: add comprehensive test coverage and improve documentation


faraz-zakai-360training Jul 24, 2026
fc9568a

fix: address CodeRabbit review findings


faraz-zakai-360training Jul 24, 2026
7a17b19

fix: correct React 19 callback ref cleanup contract


faraz-zakai-360training Jul 27, 2026
01c45cc

fix: apply Biome formatting to phone-input test


faraz-zakai-360training Jul 27, 2026
117f3ea

fix: apply Biome formatting to checkbox-field.tsx


faraz-zakai-360training Jul 28, 2026
c79cc5e

chore: add patch changeset for phone input fix


jaruesink Jul 29, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/phone-input-selection.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
"@lambdacurry/forms": patch
---

Fix phone input cursor positioning and text selection.

337 changes: 337 additions & 0 deletions
apps/docs/src/remix-hook-form/phone-input.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import { z } from 'zod';
import type { ElementType } from 'react';
import type { FetcherWithComponents } from 'react-router';
import type { FormMessageProps } from '@lambdacurry/forms/ui/form';
import { useRef, useEffect } from 'react';

// Mock useFetcher
jest.mock('react-router', () => ({
Expand DownExpand Up@@ -186,4 +187,340 @@ describe('PhoneInput Component', () => {
 expect(screen.getByLabelText('International Phone Number')).toBeInTheDocument();
 });
 });

 describe('MI-1188: Selection Replacement and Cursor Positioning', () => {
 it('replaces selected middle digits when typing (AC #1)', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select middle digits "555" (positions 6-8 in formatted string "(202) 555-0123")
 input.focus();
 input.setSelectionRange(6, 9);

 // Type replacement digits
 await user.keyboard('999');

 // Should replace selected "555" with "999"
 await waitFor(() => {
 expect(input.value).toBe('(202) 999-0123');
 });
 });

 it('replaces entire number when all text selected (AC #2)', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select all text
 input.focus();
 input.setSelectionRange(0, input.value.length);

 // Type new number
 await user.keyboard('310');

 // Should replace entire value
 await waitFor(() => {
 expect(input.value).toBe('(310');
 });
 });

 it('maintains cursor position after formatting during typing', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type partial number
 await user.type(input, '202555');

 await waitFor(() => {
 expect(input.value).toBe('(202) 555');
 // Cursor should be at exact position after last digit (after "555")
 expect(input.selectionStart).toBe(9); // "(202) 555" length
 });
 });

 it('handles backspace correctly with cursor positioning', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type full number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Backspace once
 await user.keyboard('{Backspace}');

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-012');
 });
 });
 });

 describe('Paste Events', () => {
 it('formats pasted plain digits correctly', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number');

 await user.click(input);
 await user.paste('2025550123');

 await waitFor(() => {
 expect((input as HTMLInputElement).value).toBe('(202) 555-0123');
 });
 });

 it('handles pasted formatted number', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number');

 await user.click(input);
 await user.paste('(202) 555-0123');

 await waitFor(() => {
 expect((input as HTMLInputElement).value).toBe('(202) 555-0123');
 });
 });

 it('handles paste with selection replacement', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select middle portion
 input.focus();
 input.setSelectionRange(6, 9);

 // Paste replacement
 await user.paste('999');

 await waitFor(() => {
 expect(input.value).toBe('(202) 999-0123');
 });
 });
 });

 describe('Ref Forwarding (React 19 Compliance)', () => {
 it('forwards ref correctly to input element', () => {
 const TestRefComponent = () => {
 const ref = useRef<HTMLInputElement>(null);
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: '', internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" ref={ref} />
 <div data-testid="ref-check">{ref.current ? 'ref-attached' : 'no-ref'}</div>
 </form>
 </RemixFormProvider>
 );
 };

 const { rerender } = render(<TestRefComponent />);

 // Trigger rerender to ensure ref is attached
 rerender(<TestRefComponent />);

 const refCheck = screen.getByTestId('ref-check');
 expect(refCheck.textContent).toBe('ref-attached');
 });
Comment thread
coderabbitai[bot] marked this conversation as resolved.


 it('calls callback ref cleanup on unmount', () => {
 const cleanup = jest.fn();
 const callbackRef = jest.fn(() => cleanup);

 const TestRefComponent = () => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: '', internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" ref={callbackRef} />
 </form>
 </RemixFormProvider>
 );
 };

 const { unmount } = render(<TestRefComponent />);

 expect(callbackRef).toHaveBeenCalledWith(expect.any(HTMLInputElement));
 expect(callbackRef).toHaveBeenCalledTimes(1);

 unmount();

 expect(cleanup).toHaveBeenCalled();
 // React 19: cleanup-returning callback should NOT be called with null
 expect(callbackRef).toHaveBeenCalledTimes(1); // Still only 1 call
 expect(callbackRef).not.toHaveBeenCalledWith(null);
 });
 });

 describe('Focus/Blur Value Synchronization', () => {
 it('defers external value updates while focused', async () => {
 const TestValueSyncComponent = ({ value }: { value: string }) => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: value, internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 useEffect(() => {
 methods.setValue('usaPhone', value);
 }, [value, methods]);

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" />
 </form>
 </RemixFormProvider>
 );
 };

 const user = userEvent.setup();
 const { rerender } = render(<TestValueSyncComponent value="2025550100" />);

 const input = screen.getByLabelText('Phone') as HTMLInputElement;

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // Focus the input
 await user.click(input);
 expect(input).toHaveFocus();

 // External value change while focused
 rerender(<TestValueSyncComponent value="3105550200" />);

 // Should still show old value while focused
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // Blur the input
 await user.tab();

 // Should now show new value after blur
 await waitFor(() => {
 expect(input.value).toBe('(310) 555-0200');
 });
 });

 it('applies external value updates immediately when not focused', async () => {
 const TestValueSyncComponent = ({ value }: { value: string }) => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: value, internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 useEffect(() => {
 methods.setValue('usaPhone', value);
 }, [value, methods]);

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" />
 </form>
 </RemixFormProvider>
 );
 };

 const { rerender } = render(<TestValueSyncComponent value="2025550100" />);

 const input = screen.getByLabelText('Phone') as HTMLInputElement;

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // External value change while NOT focused
 rerender(<TestValueSyncComponent value="3105550200" />);

 // Should apply new value immediately
 await waitFor(() => {
 expect(input.value).toBe('(310) 555-0200');
 });
 });
 });
});

6 changes: 5 additions & 1 deletion
packages/components/src/ui/checkbox-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -68,7 +68,11 @@ const CheckboxField = ({

 return (
 <FormItem
 className={cn('flex flex-row gap-3 space-y-0', hasSupportingText ? 'items-start' : 'items-center', className)}
 className={cn(
 'flex flex-row gap-3 space-y-0',
 hasSupportingText ? 'items-start' : 'items-center',
 className,
 )}
 >
 <FormControl Component={components?.FormControl}>
 <CheckboxComponent
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
fix(PhoneInput): preserve cursor position and text selection during f… by faraz-zakai-360training · Pull Request #183 · lambda-curry/forms · GitHub
Skip to content
fix(PhoneInput): preserve cursor position and text selection during f…#183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jaruesink
merged 8 commits into

from

Jul 29, 2026
 Merged


fix(PhoneInput): preserve cursor position and text selection during f…
#183
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


8 commits


Select commit
Hold shift + click to select a range
3a37cf8

fix(PhoneInput): preserve cursor position and text selection during f…


faraz-zakai-360training Jul 23, 2026
d2cab49

fix: address Currybot ref forwarding and focused update issues


faraz-zakai-360training Jul 24, 2026
ff1a171

feat: add comprehensive test coverage and improve documentation


faraz-zakai-360training Jul 24, 2026
fc9568a

fix: address CodeRabbit review findings


faraz-zakai-360training Jul 24, 2026
7a17b19

fix: correct React 19 callback ref cleanup contract


faraz-zakai-360training Jul 27, 2026
01c45cc

fix: apply Biome formatting to phone-input test


faraz-zakai-360training Jul 27, 2026
117f3ea

fix: apply Biome formatting to checkbox-field.tsx


faraz-zakai-360training Jul 28, 2026
c79cc5e

chore: add patch changeset for phone input fix


jaruesink Jul 29, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/phone-input-selection.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
"@lambdacurry/forms": patch
---

Fix phone input cursor positioning and text selection.

337 changes: 337 additions & 0 deletions
apps/docs/src/remix-hook-form/phone-input.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import { z } from 'zod';
import type { ElementType } from 'react';
import type { FetcherWithComponents } from 'react-router';
import type { FormMessageProps } from '@lambdacurry/forms/ui/form';
import { useRef, useEffect } from 'react';

// Mock useFetcher
jest.mock('react-router', () => ({
Expand DownExpand Up@@ -186,4 +187,340 @@ describe('PhoneInput Component', () => {
 expect(screen.getByLabelText('International Phone Number')).toBeInTheDocument();
 });
 });

 describe('MI-1188: Selection Replacement and Cursor Positioning', () => {
 it('replaces selected middle digits when typing (AC #1)', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select middle digits "555" (positions 6-8 in formatted string "(202) 555-0123")
 input.focus();
 input.setSelectionRange(6, 9);

 // Type replacement digits
 await user.keyboard('999');

 // Should replace selected "555" with "999"
 await waitFor(() => {
 expect(input.value).toBe('(202) 999-0123');
 });
 });

 it('replaces entire number when all text selected (AC #2)', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select all text
 input.focus();
 input.setSelectionRange(0, input.value.length);

 // Type new number
 await user.keyboard('310');

 // Should replace entire value
 await waitFor(() => {
 expect(input.value).toBe('(310');
 });
 });

 it('maintains cursor position after formatting during typing', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type partial number
 await user.type(input, '202555');

 await waitFor(() => {
 expect(input.value).toBe('(202) 555');
 // Cursor should be at exact position after last digit (after "555")
 expect(input.selectionStart).toBe(9); // "(202) 555" length
 });
 });

 it('handles backspace correctly with cursor positioning', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type full number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Backspace once
 await user.keyboard('{Backspace}');

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-012');
 });
 });
 });

 describe('Paste Events', () => {
 it('formats pasted plain digits correctly', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number');

 await user.click(input);
 await user.paste('2025550123');

 await waitFor(() => {
 expect((input as HTMLInputElement).value).toBe('(202) 555-0123');
 });
 });

 it('handles pasted formatted number', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number');

 await user.click(input);
 await user.paste('(202) 555-0123');

 await waitFor(() => {
 expect((input as HTMLInputElement).value).toBe('(202) 555-0123');
 });
 });

 it('handles paste with selection replacement', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select middle portion
 input.focus();
 input.setSelectionRange(6, 9);

 // Paste replacement
 await user.paste('999');

 await waitFor(() => {
 expect(input.value).toBe('(202) 999-0123');
 });
 });
 });

 describe('Ref Forwarding (React 19 Compliance)', () => {
 it('forwards ref correctly to input element', () => {
 const TestRefComponent = () => {
 const ref = useRef<HTMLInputElement>(null);
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: '', internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" ref={ref} />
 <div data-testid="ref-check">{ref.current ? 'ref-attached' : 'no-ref'}</div>
 </form>
 </RemixFormProvider>
 );
 };

 const { rerender } = render(<TestRefComponent />);

 // Trigger rerender to ensure ref is attached
 rerender(<TestRefComponent />);

 const refCheck = screen.getByTestId('ref-check');
 expect(refCheck.textContent).toBe('ref-attached');
 });
Comment thread
coderabbitai[bot] marked this conversation as resolved.


 it('calls callback ref cleanup on unmount', () => {
 const cleanup = jest.fn();
 const callbackRef = jest.fn(() => cleanup);

 const TestRefComponent = () => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: '', internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" ref={callbackRef} />
 </form>
 </RemixFormProvider>
 );
 };

 const { unmount } = render(<TestRefComponent />);

 expect(callbackRef).toHaveBeenCalledWith(expect.any(HTMLInputElement));
 expect(callbackRef).toHaveBeenCalledTimes(1);

 unmount();

 expect(cleanup).toHaveBeenCalled();
 // React 19: cleanup-returning callback should NOT be called with null
 expect(callbackRef).toHaveBeenCalledTimes(1); // Still only 1 call
 expect(callbackRef).not.toHaveBeenCalledWith(null);
 });
 });

 describe('Focus/Blur Value Synchronization', () => {
 it('defers external value updates while focused', async () => {
 const TestValueSyncComponent = ({ value }: { value: string }) => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: value, internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 useEffect(() => {
 methods.setValue('usaPhone', value);
 }, [value, methods]);

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" />
 </form>
 </RemixFormProvider>
 );
 };

 const user = userEvent.setup();
 const { rerender } = render(<TestValueSyncComponent value="2025550100" />);

 const input = screen.getByLabelText('Phone') as HTMLInputElement;

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // Focus the input
 await user.click(input);
 expect(input).toHaveFocus();

 // External value change while focused
 rerender(<TestValueSyncComponent value="3105550200" />);

 // Should still show old value while focused
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // Blur the input
 await user.tab();

 // Should now show new value after blur
 await waitFor(() => {
 expect(input.value).toBe('(310) 555-0200');
 });
 });

 it('applies external value updates immediately when not focused', async () => {
 const TestValueSyncComponent = ({ value }: { value: string }) => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: value, internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 useEffect(() => {
 methods.setValue('usaPhone', value);
 }, [value, methods]);

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" />
 </form>
 </RemixFormProvider>
 );
 };

 const { rerender } = render(<TestValueSyncComponent value="2025550100" />);

 const input = screen.getByLabelText('Phone') as HTMLInputElement;

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // External value change while NOT focused
 rerender(<TestValueSyncComponent value="3105550200" />);

 // Should apply new value immediately
 await waitFor(() => {
 expect(input.value).toBe('(310) 555-0200');
 });
 });
 });
});

6 changes: 5 additions & 1 deletion
packages/components/src/ui/checkbox-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -68,7 +68,11 @@ const CheckboxField = ({

 return (
 <FormItem
 className={cn('flex flex-row gap-3 space-y-0', hasSupportingText ? 'items-start' : 'items-center', className)}
 className={cn(
 'flex flex-row gap-3 space-y-0',
 hasSupportingText ? 'items-start' : 'items-center',
 className,
 )}
 >
 <FormControl Component={components?.FormControl}>
 <CheckboxComponent
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
fix(PhoneInput): preserve cursor position and text selection during f… by faraz-zakai-360training · Pull Request #183 · lambda-curry/forms · GitHub
Skip to content
fix(PhoneInput): preserve cursor position and text selection during f…#183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jaruesink
merged 8 commits into

from

Jul 29, 2026
 Merged


fix(PhoneInput): preserve cursor position and text selection during f…
#183
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


8 commits


Select commit
Hold shift + click to select a range
3a37cf8

fix(PhoneInput): preserve cursor position and text selection during f…


faraz-zakai-360training Jul 23, 2026
d2cab49

fix: address Currybot ref forwarding and focused update issues


faraz-zakai-360training Jul 24, 2026
ff1a171

feat: add comprehensive test coverage and improve documentation


faraz-zakai-360training Jul 24, 2026
fc9568a

fix: address CodeRabbit review findings


faraz-zakai-360training Jul 24, 2026
7a17b19

fix: correct React 19 callback ref cleanup contract


faraz-zakai-360training Jul 27, 2026
01c45cc

fix: apply Biome formatting to phone-input test


faraz-zakai-360training Jul 27, 2026
117f3ea

fix: apply Biome formatting to checkbox-field.tsx


faraz-zakai-360training Jul 28, 2026
c79cc5e

chore: add patch changeset for phone input fix


jaruesink Jul 29, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/phone-input-selection.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
"@lambdacurry/forms": patch
---

Fix phone input cursor positioning and text selection.

337 changes: 337 additions & 0 deletions
apps/docs/src/remix-hook-form/phone-input.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import { z } from 'zod';
import type { ElementType } from 'react';
import type { FetcherWithComponents } from 'react-router';
import type { FormMessageProps } from '@lambdacurry/forms/ui/form';
import { useRef, useEffect } from 'react';

// Mock useFetcher
jest.mock('react-router', () => ({
Expand DownExpand Up@@ -186,4 +187,340 @@ describe('PhoneInput Component', () => {
 expect(screen.getByLabelText('International Phone Number')).toBeInTheDocument();
 });
 });

 describe('MI-1188: Selection Replacement and Cursor Positioning', () => {
 it('replaces selected middle digits when typing (AC #1)', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select middle digits "555" (positions 6-8 in formatted string "(202) 555-0123")
 input.focus();
 input.setSelectionRange(6, 9);

 // Type replacement digits
 await user.keyboard('999');

 // Should replace selected "555" with "999"
 await waitFor(() => {
 expect(input.value).toBe('(202) 999-0123');
 });
 });

 it('replaces entire number when all text selected (AC #2)', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select all text
 input.focus();
 input.setSelectionRange(0, input.value.length);

 // Type new number
 await user.keyboard('310');

 // Should replace entire value
 await waitFor(() => {
 expect(input.value).toBe('(310');
 });
 });

 it('maintains cursor position after formatting during typing', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type partial number
 await user.type(input, '202555');

 await waitFor(() => {
 expect(input.value).toBe('(202) 555');
 // Cursor should be at exact position after last digit (after "555")
 expect(input.selectionStart).toBe(9); // "(202) 555" length
 });
 });

 it('handles backspace correctly with cursor positioning', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type full number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Backspace once
 await user.keyboard('{Backspace}');

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-012');
 });
 });
 });

 describe('Paste Events', () => {
 it('formats pasted plain digits correctly', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number');

 await user.click(input);
 await user.paste('2025550123');

 await waitFor(() => {
 expect((input as HTMLInputElement).value).toBe('(202) 555-0123');
 });
 });

 it('handles pasted formatted number', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number');

 await user.click(input);
 await user.paste('(202) 555-0123');

 await waitFor(() => {
 expect((input as HTMLInputElement).value).toBe('(202) 555-0123');
 });
 });

 it('handles paste with selection replacement', async () => {
 const user = userEvent.setup();
 render(<TestPhoneInputForm />);

 const input = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

 // Type initial number
 await user.type(input, '2025550123');
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0123');
 });

 // Select middle portion
 input.focus();
 input.setSelectionRange(6, 9);

 // Paste replacement
 await user.paste('999');

 await waitFor(() => {
 expect(input.value).toBe('(202) 999-0123');
 });
 });
 });

 describe('Ref Forwarding (React 19 Compliance)', () => {
 it('forwards ref correctly to input element', () => {
 const TestRefComponent = () => {
 const ref = useRef<HTMLInputElement>(null);
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: '', internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" ref={ref} />
 <div data-testid="ref-check">{ref.current ? 'ref-attached' : 'no-ref'}</div>
 </form>
 </RemixFormProvider>
 );
 };

 const { rerender } = render(<TestRefComponent />);

 // Trigger rerender to ensure ref is attached
 rerender(<TestRefComponent />);

 const refCheck = screen.getByTestId('ref-check');
 expect(refCheck.textContent).toBe('ref-attached');
 });
Comment thread
coderabbitai[bot] marked this conversation as resolved.


 it('calls callback ref cleanup on unmount', () => {
 const cleanup = jest.fn();
 const callbackRef = jest.fn(() => cleanup);

 const TestRefComponent = () => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: '', internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" ref={callbackRef} />
 </form>
 </RemixFormProvider>
 );
 };

 const { unmount } = render(<TestRefComponent />);

 expect(callbackRef).toHaveBeenCalledWith(expect.any(HTMLInputElement));
 expect(callbackRef).toHaveBeenCalledTimes(1);

 unmount();

 expect(cleanup).toHaveBeenCalled();
 // React 19: cleanup-returning callback should NOT be called with null
 expect(callbackRef).toHaveBeenCalledTimes(1); // Still only 1 call
 expect(callbackRef).not.toHaveBeenCalledWith(null);
 });
 });

 describe('Focus/Blur Value Synchronization', () => {
 it('defers external value updates while focused', async () => {
 const TestValueSyncComponent = ({ value }: { value: string }) => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: value, internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 useEffect(() => {
 methods.setValue('usaPhone', value);
 }, [value, methods]);

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" />
 </form>
 </RemixFormProvider>
 );
 };

 const user = userEvent.setup();
 const { rerender } = render(<TestValueSyncComponent value="2025550100" />);

 const input = screen.getByLabelText('Phone') as HTMLInputElement;

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // Focus the input
 await user.click(input);
 expect(input).toHaveFocus();

 // External value change while focused
 rerender(<TestValueSyncComponent value="3105550200" />);

 // Should still show old value while focused
 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // Blur the input
 await user.tab();

 // Should now show new value after blur
 await waitFor(() => {
 expect(input.value).toBe('(310) 555-0200');
 });
 });

 it('applies external value updates immediately when not focused', async () => {
 const TestValueSyncComponent = ({ value }: { value: string }) => {
 const mockFetcher = {
 data: {},
 state: 'idle' as const,
 submit: jest.fn(),
 Form: 'form' as ElementType,
 } as unknown as FetcherWithComponents<unknown>;

 mockUseFetcher.mockReturnValue(mockFetcher);

 const methods = useRemixForm<TestFormData>({
 resolver: zodResolver(testSchema),
 defaultValues: { usaPhone: value, internationalPhone: '' },
 fetcher: mockFetcher,
 submitConfig: { action: '/test', method: 'post' },
 });

 useEffect(() => {
 methods.setValue('usaPhone', value);
 }, [value, methods]);

 return (
 <RemixFormProvider {...methods}>
 <form>
 <PhoneInput name="usaPhone" label="Phone" />
 </form>
 </RemixFormProvider>
 );
 };

 const { rerender } = render(<TestValueSyncComponent value="2025550100" />);

 const input = screen.getByLabelText('Phone') as HTMLInputElement;

 await waitFor(() => {
 expect(input.value).toBe('(202) 555-0100');
 });

 // External value change while NOT focused
 rerender(<TestValueSyncComponent value="3105550200" />);

 // Should apply new value immediately
 await waitFor(() => {
 expect(input.value).toBe('(310) 555-0200');
 });
 });
 });
});

6 changes: 5 additions & 1 deletion
packages/components/src/ui/checkbox-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -68,7 +68,11 @@ const CheckboxField = ({

 return (
 <FormItem
 className={cn('flex flex-row gap-3 space-y-0', hasSupportingText ? 'items-start' : 'items-center', className)}
 className={cn(
 'flex flex-row gap-3 space-y-0',
 hasSupportingText ? 'items-start' : 'items-center',
 className,
 )}
 >
 <FormControl Component={components?.FormControl}>
 <CheckboxComponent
Expand Down
Loading