fix(stack/git): fix cursor movement issue in git text fields (#8656)

app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.controller.js

@@ -182,7 +182,7 @@ class StackRedeployGitFormController {
 
     this.formValues.AutoUpdate = parseAutoUpdateResponse(this.stack.AutoUpdate);
 
-    if (this.stack.AutoUpdate.Webhook) {
+    if (this.stack.AutoUpdate && this.stack.AutoUpdate.Webhook) {
       this.state.webhookId = this.stack.AutoUpdate.Webhook;
     }
 

app/react/hooks/useStateWrapper.ts

@@ -0,0 +1,19 @@
+import { useState, useCallback, useEffect } from 'react';
+
+export function useStateWrapper<T>(value: T, onChange: (value: T) => void) {
+  const [inputValue, setInputValue] = useState(value);
+
+  const updateInputValue = useCallback(
+    (value: T) => {
+      setInputValue(value);
+      onChange(value);
+    },
+    [onChange, setInputValue]
+  );
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  return [inputValue, updateInputValue] as const;
+}

app/react/portainer/gitops/AdditionalFilesField.tsx

@@ -1,9 +1,10 @@
 import { FormikErrors } from 'formik';
 
+import { useStateWrapper } from '@/react/hooks/useStateWrapper';
+
 import { FormError } from '@@/form-components/FormError';
 import { InputGroup } from '@@/form-components/InputGroup';
 import { InputList, ItemProps } from '@@/form-components/InputList';
-import { useCaretPosition } from '@@/form-components/useCaretPosition';
 
 interface Props {
   value: Array<string>;
@@ -32,21 +33,19 @@ function Item({
   error,
   readOnly,
 }: ItemProps<string>) {
-  const { ref, updateCaret } = useCaretPosition();
+  const [inputValue, updateInputValue] = useStateWrapper(item, onChange);
 
   return (
     <div className="relative flex flex-col">
       <InputGroup size="small">
         <InputGroup.Addon>path</InputGroup.Addon>
         <InputGroup.Input
-          mRef={ref}
           required
           disabled={disabled}
           readOnly={readOnly}
-          value={item}
+          value={inputValue}
           onChange={(e) => {
-            onChange(e.target.value);
+            updateInputValue(e.target.value);
-            updateCaret();
           }}
         />
       </InputGroup>

app/react/portainer/gitops/ComposePathField/ComposePathField.tsx

@@ -1,7 +1,8 @@
+import { useStateWrapper } from '@/react/hooks/useStateWrapper';
+
 import { FormControl } from '@@/form-components/FormControl';
 import { TextTip } from '@@/Tip/TextTip';
 import { Input } from '@@/form-components/Input';
-import { useCaretPosition } from '@@/form-components/useCaretPosition';
 
 import { GitFormModel } from '../types';
 import { isBE } from '../../feature-flags/feature-flags.service';
@@ -25,7 +26,7 @@ export function ComposePathField({
   isDockerStandalone,
   errors,
 }: Props) {
-  const { ref, updateCaret } = useCaretPosition();
+  const [inputValue, updateInputValue] = useStateWrapper(value, onChange);
 
   return (
     <div className="form-group">
@@ -65,11 +66,9 @@ export function ComposePathField({
             />
           ) : (
             <Input
-              mRef={ref}
+              value={inputValue}
-              value={value}
               onChange={(e) => {
-                onChange(e.target.value);
+                updateInputValue(e.target.value);
-                updateCaret();
               }}
               placeholder={isCompose ? 'docker-compose.yml' : 'manifest.yml'}
             />

app/react/portainer/gitops/ComposePathField/PathSelector.tsx

@@ -12,8 +12,6 @@ import clsx from 'clsx';
 import { useSearch } from '@/react/portainer/gitops/queries/useSearch';
 import { useDebounce } from '@/react/hooks/useDebounce';
 
-import { useCaretPosition } from '@@/form-components/useCaretPosition';
-
 import { getAuthentication } from '../utils';
 import { GitFormModel } from '../types';
 
@@ -30,7 +28,7 @@ export function PathSelector({
   placeholder: string;
   model: GitFormModel;
 }) {
-  const [searchTerm, setSearchTerm] = useDebounce('', () => {});
+  const [searchTerm, setSearchTerm] = useDebounce(value, onChange);
 
   const creds = getAuthentication(model);
   const payload = {
@@ -43,7 +41,6 @@ export function PathSelector({
     model.RepositoryURL && model.RepositoryURLValid && searchTerm
   );
   const { data: searchResults } = useSearch(payload, enabled);
-  const { ref, updateCaret } = useCaretPosition();
 
   return (
     <Combobox
@@ -53,11 +50,10 @@ export function PathSelector({
       data-cy="component-gitComposeInput"
     >
       <ComboboxInput
-        ref={ref}
         className="form-control"
         onChange={handleChange}
         placeholder={placeholder}
-        value={value}
+        value={searchTerm}
       />
       {searchResults && searchResults.length > 0 && (
         <ComboboxPopover>
@@ -81,12 +77,9 @@ export function PathSelector({
 
   function handleChange(e: ChangeEvent<HTMLInputElement>) {
     setSearchTerm(e.target.value);
-    onChange(e.target.value);
-    updateCaret();
   }
 
   function onSelect(value: string) {
-    setSearchTerm('');
     onChange(value);
   }
 }

app/react/portainer/gitops/RefField/RefField.tsx

@@ -2,6 +2,7 @@ import { PropsWithChildren, ReactNode } from 'react';
 import { SchemaOf, string } from 'yup';
 
 import { StackId } from '@/react/docker/stacks/types';
+import { useStateWrapper } from '@/react/hooks/useStateWrapper';
 
 import { FormControl } from '@@/form-components/FormControl';
 import { Input } from '@@/form-components/Input';
@@ -29,6 +30,8 @@ export function RefField({
   isUrlValid,
   stackId,
 }: Props) {
+  const [inputValue, updateInputValue] = useStateWrapper(value, onChange);
+
   return isBE ? (
     <Wrapper
       errors={error}
@@ -62,8 +65,8 @@ export function RefField({
       }
     >
       <Input
-        value={value}
+        value={inputValue}
-        onChange={(e) => onChange(e.target.value)}
+        onChange={(e) => updateInputValue(e.target.value)}
         placeholder="refs/heads/main"
       />
     </Wrapper>