ISSUE #4548 - fix ticket group rule value autofocus

3drepo · Jan 23, 2024 · 05f8fad · 05f8fad
1 parent ebab5d2
commit 05f8fad
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/...iewer/tickets/ticketsForm/ticketGroups/groups/groupRulesForm/groupRulesForm.component.tsx b/...iewer/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/...pRulesForm/groupRulesInputs/ruleFieldValues/fieldValueInput/fieldValueInput.component.tsx b/...pRulesForm/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/...oups/groups/groupRulesForm/groupRulesInputs/ruleFieldValues/ruleFieldValues.component.tsx b/...oups/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>