Input Tracker Component

Build a React component that captures and displays all raw user input as they type into a numeric input field, before any parsing or formatting occurs.

Requirements

Create a component called InputTracker that:

1. Captures every raw keystroke the user makes in the numeric input field
2. Maintains a history of all raw input strings (before any parsing or formatting)
3. Validates each raw input string to detect:
   • Invalid characters (letters, special symbols except . and -)
   • Invalid patterns (multiple decimal points like "1.2.3")
4. Displays the last 5 raw inputs in a list, showing:
   • The raw input string
   • Whether it's valid or invalid
   • A sequence number

Implementation Details

The component should accept these props:

• initialValue: Optional starting value
• min: Minimum allowed value
• max: Maximum allowed value

The validation checks should only test the format of the raw string, not whether it's within min/max range.

Test Cases

• When user types "123", the raw input "123" appears in history @test
• When user types "12.34.56", the history shows this is invalid (multiple decimals) @test
• When user types "abc123", the history flags it as invalid (non-numeric characters) @test
• When user progressively types "1", then "12", then "123", all three raw strings appear in history @test

Implementation

@generates

API

import React from 'react';

export interface InputHistoryEntry {
  rawInput: string;
  isValid: boolean;
  sequenceNumber: number;
}

export interface InputTrackerProps {
  initialValue?: number | string;
  min?: number;
  max?: number;
}

export const InputTracker: React.FC<InputTrackerProps>;

Dependencies { .dependencies }

@rc-component/input-number { .dependency }

Provides numeric input functionality with raw input capture.

React { .dependency }

React framework for building the component.