fix: add onForceNext prop to BasicInfoStep and implement focus handling

Author: Lemon-miaow

pearl_calculator_ui/src/components/configuration/BasicInfoStep.tsx

@@ -13,9 +13,10 @@ import { useTranslation } from "react-i18next";
 
 interface BasicInfoStepProps {
 	errors: Record<string, string>;
+	onForceNext?: () => void;
 }
 
-export function BasicInfoStep({ errors }: BasicInfoStepProps) {
+export function BasicInfoStep({ errors, onForceNext }: BasicInfoStepProps) {
 	const {
 		draftConfig,
 		setDraftConfig,
@@ -213,6 +214,12 @@ export function BasicInfoStep({ errors }: BasicInfoStepProps) {
 								onChange={(e) =>
 									setDraftConfig({ ...draftConfig, max_tnt: e.target.value })
 								}
+								onKeyDown={(e) => {
+									if (e.key === "Tab" && !e.shiftKey) {
+										e.preventDefault();
+										onForceNext?.();
+									}
+								}}
 								placeholder={errors.max_tnt}
 								className={cn(
 									"h-7 text-xs font-mono px-2 py-0 shadow-none",

pearl_calculator_ui/src/components/configuration/CompactInput.tsx

@@ -13,6 +13,7 @@ interface CompactInputProps {
 	labelClassName?: string;
 	error?: string;
 	suffix?: React.ReactNode;
+	id?: string;
 }
 
 export function CompactInput({
@@ -23,6 +24,7 @@ export function CompactInput({
 	labelClassName,
 	error,
 	suffix,
+	id,
 }: CompactInputProps) {
 	const [localValue, setLocalValue] = React.useState(value.toString());
 	const [isFocused, setIsFocused] = React.useState(false);
@@ -62,6 +64,7 @@ export function CompactInput({
 					onFocus={() => setIsFocused(true)}
 					onBlur={() => setIsFocused(false)}
 					placeholder={error}
+					id={id}
 				/>
 			</div>
 			{suffix && (

pearl_calculator_ui/src/components/configuration/TNTConfigurationStep.tsx

@@ -70,6 +70,7 @@ export function TNTConfigurationStep({ errors }: TNTConfigurationStepProps) {
 						hasError={!!errors.red_tnt_selection}
 						xSign="-"
 						zSign="-"
+						inputIdX="tnt-config-start-input"
 					/>
 					<TNTInputGroup
 						title={t("configuration_page.ne_tnt")}

pearl_calculator_ui/src/components/configuration/TNTInputGroup.tsx

@@ -15,6 +15,7 @@ interface TNTInputGroupProps {
 	yOffset?: number;
 	xSign?: string;
 	zSign?: string;
+	inputIdX?: string;
 }
 
 export function TNTInputGroup({
@@ -29,6 +30,7 @@ export function TNTInputGroup({
 	yOffset = 0,
 	xSign,
 	zSign,
+	inputIdX,
 }: TNTInputGroupProps) {
 	const { t } = useTranslation();
 	let yValue: string | number = data.y;
@@ -90,6 +92,7 @@ export function TNTInputGroup({
 							</span>
 						)
 					}
+					id={inputIdX}
 				/>
 				<CompactInput
 					label={t("configuration_page.label_y")}

pearl_calculator_ui/src/pages/Configuration.tsx

@@ -81,6 +81,16 @@ export default function Configuration() {
 
 	const progress = count > 0 ? (current / count) * 100 : 0;
 
+	const handleForceNext = () => {
+		if (validateStep(current)) {
+			api?.scrollNext();
+			setTimeout(() => {
+				const nextInput = document.getElementById("tnt-config-start-input");
+				nextInput?.focus();
+			}, 300);
+		}
+	};
+
 	if (!isConfiguring) {
 		return (
 			<OnboardingPanel
@@ -148,7 +158,10 @@ export default function Configuration() {
 						<CarouselContent className="h-full">
 							<CarouselItem className="h-full">
 								<ScrollArea className="h-full">
-									<BasicInfoStep errors={errors} />
+									<BasicInfoStep
+										errors={errors}
+										onForceNext={handleForceNext}
+									/>
 								</ScrollArea>
 							</CarouselItem>
 							<CarouselItem className="h-full">