From a549db4044d65199d1772813b94c1fb855b531c4 Mon Sep 17 00:00:00 2001
From: pabolkovdn <pabolkovdn@yandex-team.ru>
Date: Thu, 31 Oct 2024 21:45:24 +0300
Subject: [PATCH] fix(Navigation): fix create directory modal's error "maximum
 call stack size exceeded" [YTFRONT-4245]

---
 .../ui/src/ui/containers/PathEditor/PathEditor.js  | 14 ++++++++++++--
 .../Navigation/NavigationTopRowContent.tsx         |  9 ++++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/ui/containers/PathEditor/PathEditor.js b/packages/ui/src/ui/containers/PathEditor/PathEditor.js
index 75ddebfdca..788152a183 100644
--- a/packages/ui/src/ui/containers/PathEditor/PathEditor.js
+++ b/packages/ui/src/ui/containers/PathEditor/PathEditor.js
@@ -61,6 +61,9 @@ export class PathEditor extends Component {
         autoFocus: PropTypes.bool,
         hasClear: PropTypes.bool,
         showErrors: PropTypes.bool,
+        inputRef: PropTypes.shape({
+            current: PropTypes.instanceOf(HTMLInputElement),
+        }),
     };
 
     static defaultProps = {
@@ -78,7 +81,7 @@ export class PathEditor extends Component {
         super(props);
 
         this.suggestionsList = React.createRef();
-        this.input = React.createRef();
+        this.input = this.props.inputRef ?? React.createRef();
 
         this.debounceLoading = debounce_(this.debounceLoading, debounceTime);
         this.prevScope = null;
@@ -183,9 +186,16 @@ export class PathEditor extends Component {
         const {onFocus} = this.props;
         const {path} = this.state;
 
+        // Action {onFocus} from TextInput with {autoFocus=true} property invoke before controllRef will set,
+        //  for this reason DOM Input element is assings hrere into ref, those <inputRef> (from own props)
+        //  will accessing in parrent component
+        if (!this.input.current) {
+            this.input.current = e.target;
+        }
+
         key.setScope('path-editor');
         this.setState({inputFocus: true});
-        onFocus?.(e, {path});
+        this.callCallback(onFocus, path);
     };
 
     handleInputBlur = () => {
diff --git a/packages/ui/src/ui/pages/navigation/Navigation/NavigationTopRowContent.tsx b/packages/ui/src/ui/pages/navigation/Navigation/NavigationTopRowContent.tsx
index 58787c3eda..07365b3170 100644
--- a/packages/ui/src/ui/pages/navigation/Navigation/NavigationTopRowContent.tsx
+++ b/packages/ui/src/ui/pages/navigation/Navigation/NavigationTopRowContent.tsx
@@ -133,6 +133,8 @@ function NavigationPathEditor({hideEditor}: {hideEditor: () => void}) {
     const dispatch = useDispatch();
     const actualPath = useSelector(getActualPath);
 
+    const inputRef = React.createRef<HTMLInputElement | null>();
+
     const handleApply = React.useCallback(
         (path: string) => {
             if (path !== actualPath) {
@@ -143,15 +145,20 @@ function NavigationPathEditor({hideEditor}: {hideEditor: () => void}) {
         [hideEditor],
     );
 
+    const handleFocus = React.useCallback(() => {
+        inputRef.current?.select();
+    }, [inputRef]);
+
     return (
         <PathEditor
+            inputRef={inputRef}
             className={block('path-editor')}
             autoFocus
             defaultPath={actualPath}
             onApply={handleApply}
             onCancel={hideEditor}
             onBlur={hideEditor}
-            onFocus={(e) => e.target.select()}
+            onFocus={handleFocus}
         />
     );
 }