diff --git a/src/components/App.tsx b/src/components/App.tsx index acfc77a67..4756f9e02 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -16,6 +16,8 @@ import { addActiveTabChangeListener } from '../util/activeTabMonitor'; import { hasStoredSession } from '../util/sessions'; import buildClassName from '../util/buildClassName'; import { parseInitialLocationHash } from '../util/routing'; +import { setupBeforeInstallPrompt } from '../util/installPrompt'; + import useFlag from '../hooks/useFlag'; import usePrevious from '../hooks/usePrevious'; import useAppLayout from '../hooks/useAppLayout'; @@ -26,10 +28,9 @@ import LockScreen from './main/LockScreen.async'; import AppInactive from './main/AppInactive'; import Transition from './ui/Transition'; import UiLoader from './common/UiLoader'; -// import Test from './components/test/TestNoRedundancy'; +// import Test from './test/TestUpdateRef'; import styles from './App.module.scss'; -import { setupBeforeInstallPrompt } from '../util/installPrompt'; type StateProps = { authState: GlobalState['authState']; diff --git a/src/components/test/TestUpdateRef.tsx b/src/components/test/TestUpdateRef.tsx new file mode 100644 index 000000000..727e4622c --- /dev/null +++ b/src/components/test/TestUpdateRef.tsx @@ -0,0 +1,25 @@ +import React, { useEffect, useRef, useState } from '../../lib/teact/teact'; + +function TestUpdateRef() { + const [isShown, setIsShown] = useState(true); + // eslint-disable-next-line no-null/no-null + const shownRef = useRef(null); + + useEffect(() => { + // Input content should preserve, but ref should clean up + // eslint-disable-next-line no-console + console.log('!!!', shownRef.current); + }, [isShown]); + + return ( +
setIsShown(!isShown)}> + {isShown ? ( + + ) : ( + + )} +
+ ); +} + +export default TestUpdateRef; diff --git a/src/lib/teact/teact-dom.ts b/src/lib/teact/teact-dom.ts index 0604cbf89..c90b29e4d 100644 --- a/src/lib/teact/teact-dom.ts +++ b/src/lib/teact/teact-dom.ts @@ -173,7 +173,13 @@ function renderWithVirtual( if (isTag) { const $newAsTag = $new as VirtualElementTag; - $newAsTag.props.ref = $current.props.ref; + if ($current.props.ref?.current === currentTarget) { + $current.props.ref.current = undefined; + } + + if ($newAsTag.props.ref) { + $newAsTag.props.ref.current = currentTarget; + } if (nextSibling || options.forceMoveToEnd) { insertBefore(parentEl, currentTarget, nextSibling);