Feat: Implement truncation warning for large numeric input values

package.json

@@ -39,7 +39,7 @@
 		"build:types": "node ./tools/schema-ts-generator.js && prettier src/type.source.ts --write",
 		"check": "tsc --noEmit",
 		"lint:check": "eslint ./src",
-		"_format": "prettier **/*.{ts,tsx,json}",
+		"_format": "prettier **/*.{ts,tsx,json,scss}",
 		"format": "npm run _format -- --write",
 		"format:check": "npm run _format -- --list-different",
 		"test:coverage": "vitest run --coverage",

src/components/Input/Input.tsx

@@ -65,11 +65,15 @@ export const CustomInput = slottableComponent<CustomProps>('Input', (props) => {
 				disabled={disabled}
 				readOnly={readOnly}
 				value={(value ?? '').toString()}
+				title={value ?? ''}
 				onChange={(e) => onChange(e.target.value)}
 				aria-required={required}
 				required={required}
 				maxLength={maxLength}
 				aria-invalid={!!errors}
+				onBlur={(e) => {
+					e.target.setSelectionRange(0, 0);
+				}}
 			/>
 			<ComponentErrors errors={errors} />
 		</div>

src/components/InputNumber/InputNumber.spec.tsx

@@ -19,7 +19,7 @@
 
 	it('renders without crashing', () => {
 		const { container } = render(<InputNumber {...baseProps} />);
 		expect(container).toMatchSnapshot();
 	});
 
 	it('renders label and input', () => {
@@ -97,7 +97,7 @@
 		const { container } = render(
 			<InputNumber {...baseProps} value={123} readOnly />
 		);
 		expect(container).toMatchSnapshot();
 
 		const input = container.querySelector('input[type="text"]');
 		expect(input).toHaveAttribute('readonly');
@@ -112,4 +112,24 @@
 		const unit = container.querySelector('span');
 		expect(unit).toHaveTextContent('kg');
 	});
+
+	it('should display the input value from the start', () => {
+		const setSelectionRangeMock = vi.fn();
+		const { container } = render(
+			<InputNumber
+				{...baseProps}
+				value={100000000000000000000000000000000000}
+			/>
+		);
+
+		const input = container.querySelector('input[type="text"]');
+
+		fireEvent.blur(input!, {
+			target: {
+				...input,
+				setSelectionRange: setSelectionRangeMock,
+			},
+		});
+		expect(setSelectionRangeMock).toHaveBeenCalledWith(0, 0);
+	});
 });

src/components/InputNumber/InputNumberThousand.tsx

@@ -55,6 +55,7 @@ export const InputNumberThousand = ({
 			className={classNames({ disabled })}
 			onValueChange={handleChange}
 			value={value ?? ''}
+			title={value ? value.toString() : ''}
 			aria-labelledby={labelId}
 			disabled={disabled}
 			readOnly={readOnly}
@@ -68,6 +69,9 @@ export const InputNumberThousand = ({
 			thousandSeparator={inputNumberPropsI18N.thousandSeparator}
 			inputMode={decimals ? 'decimal' : 'numeric'}
 			aria-invalid={invalid}
+			onBlur={(e) => {
+				e.target.setSelectionRange(0, 0);
+			}}
 		/>
 	);
 };

src/css/components/Input.scss

@@ -21,6 +21,9 @@
 			min-width: 0;
 			box-sizing: content-box;
 			background: none;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 			&:focus {
 				outline: none;
 				border-bottom: 0.125rem solid var(--color-primary-main);