From bd175a41ff08d872a2e756470cd3c1ff7d891631 Mon Sep 17 00:00:00 2001
From: CREDO23 <thierrybakera12@gmail.com>
Date: Thu, 15 Aug 2024 22:19:49 +0200
Subject: [PATCH] refactor: focus should be on the first input which has a
 digit when user click on edit | estimate task

---
 apps/web/lib/features/task/task-estimate.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/web/lib/features/task/task-estimate.tsx b/apps/web/lib/features/task/task-estimate.tsx
index 5a0c5b864..4cef5407b 100644
--- a/apps/web/lib/features/task/task-estimate.tsx
+++ b/apps/web/lib/features/task/task-estimate.tsx
@@ -5,7 +5,7 @@ import { ITeamTask, Nullable } from '@app/interfaces';
 import { clsxm } from '@app/utils';
 import { EditPenBoxIcon, CheckCircleTickIcon as TickSaveIcon, LoadingIcon } from 'assets/svg';
 import { TimeInputField } from 'lib/components';
-import { MutableRefObject, useEffect } from 'react';
+import { MutableRefObject, useEffect, useRef } from 'react';
 
 type Props = {
 	_task?: Nullable<ITeamTask>;
@@ -42,9 +42,22 @@ export function TaskEstimate({
 	} = useTaskEstimation(_task);
 	const onCloseEditionRef = useCallbackRef(onCloseEdition);
 	const closeable_fcRef = useCallbackRef(closeable_fc);
+	const hourRef = useRef<HTMLInputElement | null>(null);
+	const minRef = useRef<HTMLInputElement | null>(null);
 
 	useEffect(() => {
 		!editableMode && onCloseEditionRef.current && onCloseEditionRef.current();
+
+		if (editableMode) {
+			if (value['hours']) {
+				hourRef.current?.focus();
+			} else if (value['minutes']) {
+				minRef.current?.focus();
+			} else {
+				hourRef.current?.focus();
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [editableMode, onCloseEditionRef]);
 
 	useEffect(() => {
@@ -60,6 +73,7 @@ export function TaskEstimate({
 	return (
 		<div className={clsxm('flex items-center space-x-1', className)} ref={targetEl}>
 			<TimeInputField
+				ref={hourRef}
 				value={value['hours']}
 				onChange={onChange('hours')}
 				onKeyUp={(e) => {
@@ -91,6 +105,7 @@ export function TaskEstimate({
 				) : null
 			) : null}
 			<TimeInputField
+				ref={minRef}
 				value={value['minutes']}
 				onChange={onChange('minutes')}
 				onKeyUp={(e) => {