From 05f8fad63f76bc4cc704ecaae24bf4993c31ed44 Mon Sep 17 00:00:00 2001
From: The-Daniel <bibshall@gmail.com>
Date: Tue, 23 Jan 2024 18:14:50 +0000
Subject: [PATCH] ISSUE #4548 - fix ticket group rule value autofocus

---
 .../groups/groupRulesForm/groupRulesForm.component.tsx |  1 +
 .../fieldValueInput/fieldValueInput.component.tsx      |  4 ++--
 .../ruleFieldValues/ruleFieldValues.component.tsx      | 10 +++++++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/ticketGroups/groups/groupRulesForm/groupRulesForm.component.tsx b/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/ticketGroups/groups/groupRulesForm/groupRulesForm.component.tsx
index fbcf884e5cc..2cf94fa7974 100644
--- a/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/ticketGroups/groups/groupRulesForm/groupRulesForm.component.tsx
+++ b/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/ticketGroups/groups/groupRulesForm/groupRulesForm.component.tsx
@@ -100,6 +100,7 @@ export const GroupRulesForm = ({ onSave, onClose, rule, existingRules = [] }: IG
 				<InputsContainer>
 					<FormTextField
 						required
+						autoFocus
 						name="name"
 						label={formatMessage({ id: 'tickets.groups.filterPanel.name', defaultMessage: 'Name' })}
 						formError={errors.name}
diff --git a/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/ticketGroups/groups/groupRulesForm/groupRulesInputs/ruleFieldValues/fieldValueInput/fieldValueInput.component.tsx b/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/ticketGroups/groups/groupRulesForm/groupRulesInputs/ruleFieldValues/fieldValueInput/fieldValueInput.component.tsx
index b1b5e838ba6..da89462ac16 100644
--- a/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/ticketGroups/groups/groupRulesForm/groupRulesInputs/ruleFieldValues/fieldValueInput/fieldValueInput.component.tsx
+++ b/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/ticketGroups/groups/groupRulesForm/groupRulesInputs/ruleFieldValues/fieldValueInput/fieldValueInput.component.tsx
@@ -24,7 +24,7 @@ import { get } from 'lodash';
 import { ListboxComponent } from './listboxComponent/listboxComponent.component';
 import { Autocomplete } from './fieldValueInput.styles';
 
-export const FieldValueInput = ({ name, disabled }) => {
+export const FieldValueInput = ({ name, autoFocus = false, disabled }) => {
 	const { formState: { errors } } = useFormContext();
 	const fields = useSelector(selectMetaKeys);
 
@@ -49,7 +49,7 @@ export const FieldValueInput = ({ name, disabled }) => {
 							error={!!get(errors, name)}
 							InputProps={{
 								...InputProps,
-								autoFocus: true,
+								autoFocus,
 							}}
 							{...renderInputParams}
 						/>
diff --git a/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/ticketGroups/groups/groupRulesForm/groupRulesInputs/ruleFieldValues/ruleFieldValues.component.tsx b/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/ticketGroups/groups/groupRulesForm/groupRulesInputs/ruleFieldValues/ruleFieldValues.component.tsx
index e48ce38101f..bd0926ca2f6 100644
--- a/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/ticketGroups/groups/groupRulesForm/groupRulesInputs/ruleFieldValues/ruleFieldValues.component.tsx
+++ b/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/ticketGroups/groups/groupRulesForm/groupRulesInputs/ruleFieldValues/ruleFieldValues.component.tsx
@@ -16,7 +16,7 @@
  */
 
 import { useFormContext, useFieldArray } from 'react-hook-form';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import AddValueIcon from '@assets/icons/outlined/add_circle-outlined.svg';
 import RemoveValueIcon from '@assets/icons/outlined/remove_circle-outlined.svg';
 import { range } from 'lodash';
@@ -26,12 +26,16 @@ import { FieldValueInput } from './fieldValueInput/fieldValueInput.component';
 
 export const RuleFieldValues = ({ disabled }) => {
 	const name = 'field.values';
+	const [autoFocus, setAutoFocus] = useState(false);
 	const { control, watch, setValue } = useFormContext<IFormRule>();
 	const { fields, append, remove } = useFieldArray({ control, name });
 
 	const operator = watch('field.operator');
 
-	const appendEmptyValue = () => append({ value: '' });
+	const appendEmptyValue = () => {
+		append({ value: '' });
+		setAutoFocus(!!fields.length);
+	};
 
 	useEffect(() => {
 		if (fields.length) return;
@@ -53,7 +57,7 @@ export const RuleFieldValues = ({ disabled }) => {
 			<>
 				{fields.map((field, i) => (
 					<ValuesContainer key={field.id}>
-						<FieldValueInput name={`field.values.${i}.value`} disabled={disabled} />
+						<FieldValueInput name={`field.values.${i}.value`} autoFocus={autoFocus} disabled={disabled} />
 						<ValueIconContainer onClick={() => remove(i)} disabled={disabled || fields.length === 1}>
 							<RemoveValueIcon />
 						</ValueIconContainer>