Skip to content

Feat: TextInput updates #2361

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

Open
wants to merge 2 commits into
base: onchainkit-v1
Choose a base branch
from
Open

Feat: TextInput updates #2361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
70a4e13
text input updates
xtbase May 13, 2025
ffb8e99
update types for text input
xtbase May 13, 2025
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
10 changes: 10 additions & 0 deletions packages/onchainkit/src/internal/components/TextInput.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ type RenderTestProps = {
value?: string;
disabled?: boolean;
inputMode?: React.InputHTMLAttributes<HTMLInputElement>['inputMode'];
errorMessage?: string;
};

const RenderTest = ({
Expand All @@ -24,6 +25,7 @@ const RenderTest = ({
placeholder = 'Enter text',
setValue = vi.fn(),
value = 'test',
errorMessage = '',
...props
}: RenderTestProps) => (
<TextInput
Expand All @@ -33,6 +35,7 @@ const RenderTest = ({
placeholder={placeholder}
setValue={setValue}
value={value}
errorMessage={errorMessage}
{...props}
/>
);
Expand Down Expand Up @@ -89,4 +92,11 @@ describe('TextInput', () => {
'decimal',
);
});

it('handles errorMessage', () => {
render(<RenderTest errorMessage="Error message" />);
expect(screen.getByTestId('ockTextInput_Input')).toHaveClass(
'text-ock-text-error',
);
});
});
22 changes: 13 additions & 9 deletions packages/onchainkit/src/internal/components/TextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,23 @@ import {
type ChangeEvent,
type InputHTMLAttributes,
type ForwardedRef,
type ComponentProps,
useCallback,
forwardRef,
} from 'react';
import { useDebounce } from '../hooks/useDebounce';
import { cn } from '@/styles/theme';

type TextInputReact = {
'aria-label'?: string;
className: string;
type TextInputProps = Omit<ComponentProps<'input'>, 'onChange'> & {
delayMs?: number;
disabled?: boolean;
/** specify 'decimal' to trigger numeric keyboards on mobile devices */
inputMode?: InputHTMLAttributes<HTMLInputElement>['inputMode'];
onBlur?: () => void;
onChange: (s: string) => void;
onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
placeholder: string;
setValue?: (s: string) => void;
value: string;
inputValidator?: (s: string) => boolean;
/** specify 'message' to show error state (change in color), message is used for a11y purposes, not actually rendered currently */
errorMessage?: string;
};

export const TextInput = forwardRef(
Expand All @@ -38,7 +36,9 @@ export const TextInput = forwardRef(
inputMode,
value,
inputValidator = () => true,
}: TextInputReact,
errorMessage,
...rest
}: TextInputProps,
ref: ForwardedRef<HTMLInputElement>,
) => {
const handleDebounce = useDebounce((value) => {
Expand All @@ -63,11 +63,14 @@ export const TextInput = forwardRef(

return (
<input
aria-disabled={disabled}
aria-errormessage={errorMessage}
aria-invalid={!!errorMessage}
aria-label={ariaLabel}
data-testid="ockTextInput_Input"
ref={ref}
type="text"
className={className}
className={cn(className, !!errorMessage && 'text-ock-text-error')}
inputMode={inputMode}
placeholder={placeholder}
value={value}
Expand All @@ -77,6 +80,7 @@ export const TextInput = forwardRef(
disabled={disabled}
autoComplete="off" // autocomplete attribute handles browser autocomplete
data-1p-ignore={true} // data-1p-ignore attribute handles password manager autocomplete
{...rest}
/>
);
},
Expand Down