Skip to content

Commit

Permalink
Fix measurement bug
Browse files Browse the repository at this point in the history
We were reading from the wrong fiber.

Update the fixture to show that the document and the button remains interactive
due to the inner boundary not resizing.
  • Loading branch information
sebmarkbage committed Jan 8, 2025
1 parent cb3f0c6 commit 7f587b3
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 26 deletions.
46 changes: 25 additions & 21 deletions fixtures/view-transition/src/components/Page.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,30 +46,34 @@ export default function Page() {
}}>
{show ? 'A' : 'B'}
</button>
{show ? (
<div>
{a}
{b}
</div>
) : (
<ViewTransition>
<div>
{b}
{a}
{show ? (
<div>
{a}
{b}
</div>
) : (
<div>
{b}
{a}
</div>
)}
<ViewTransition>
{show ? <div>hello{exclamation}</div> : <section>Loading</section>}
</ViewTransition>
{show ? null : (
<ViewTransition>
<div>world{exclamation}</div>
</ViewTransition>
)}
<Activity mode={show ? 'visible' : 'hidden'}>
<ViewTransition>
<div>!!</div>
</ViewTransition>
</Activity>
</div>
)}
<ViewTransition>
{show ? <div>hello{exclamation}</div> : <section>Loading</section>}
</ViewTransition>
{show ? null : (
<ViewTransition>
<div>world{exclamation}</div>
</ViewTransition>
)}
<Activity mode={show ? 'visible' : 'hidden'}>
<ViewTransition>
<div>!!</div>
</ViewTransition>
</Activity>
</div>
);
}
10 changes: 5 additions & 5 deletions packages/react-reconciler/src/ReactFiberCommitWork.js
Original file line number Diff line number Diff line change
Expand Up @@ -823,7 +823,7 @@ function commitExitViewTransitions(
}
}

function commitBeforeUpdateViewTransition(fiber: Fiber): void {
function commitBeforeUpdateViewTransition(current: Fiber): void {
// The way we deal with multiple HostInstances as children of a View Transition in an
// update can get tricky. The important bit is that if you swap out n HostInstances
// from n HostInstances then they match up in order. Similarly, if you don't swap
Expand All @@ -840,12 +840,12 @@ function commitBeforeUpdateViewTransition(fiber: Fiber): void {
// be unexpected but it is in line with the semantics that the ViewTransition is its
// own layer that cross-fades its content when it updates. If you want to reorder then
// each child needs its own ViewTransition.
const name = getViewTransitionName(fiber.memoizedProps, fiber.stateNode);
const name = getViewTransitionName(current.memoizedProps, current.stateNode);
viewTransitionHostInstanceIdx = 0;
applyViewTransitionToHostInstances(
fiber.child,
current.child,
name,
(fiber.memoizedState = []),
(current.memoizedState = []),
true,
);
}
Expand Down Expand Up @@ -1074,7 +1074,7 @@ function measureUpdateViewTransition(
// If nothing changed due to a mutation, or children changing size
// and the measurements end up unchanged, we should restore it to not animate.
viewTransitionHostInstanceIdx = 0;
const previousMeasurements = finishedWork.memoizedState;
const previousMeasurements = current.memoizedState;
const inViewport = measureViewTransitionHostInstances(
current,
finishedWork,
Expand Down

0 comments on commit 7f587b3

Please sign in to comment.