authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-05-04 13:50:30-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-05-04 20:50:30+00:00
log0576820755fe12e32e50f03259035c863913b29f
tree9cfce14628d9a6ab4ded9dde493437d755d92c93
parentcb3211c8f3705cc3cb68460b392e95750bc66554
signature Signed by PGP key B5690EEEBB952194

Prevent focus-ring clipping in AnimatedHeight (#2503)

1 files changed, 37 insertions(+), 5 deletions(-)

apps/web/src/components/AnimatedHeight.tsx+37-5
......@@ -1,10 +1,25 @@
11"use client";
22
3import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
3import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
4
5const HEIGHT_TRANSITION_FALLBACK_MS = 250;
46
57export function AnimatedHeight({ children }: { readonly children: ReactNode }) {
68 const contentRef = useRef<HTMLDivElement>(null);
7 const [height, setHeight] = useState<number | null>(null);
9 const [heightState, setHeightState] = useState<{
10 readonly height: number | null;
11 readonly isClipping: boolean;
12 }>({ height: null, isClipping: false });
13
14 useEffect(() => {
15 if (!heightState.isClipping) return;
16 const timeoutId = window.setTimeout(() => {
17 setHeightState((currentState) =>
18 currentState.isClipping ? { ...currentState, isClipping: false } : currentState,
19 );
20 }, HEIGHT_TRANSITION_FALLBACK_MS);
21 return () => window.clearTimeout(timeoutId);
22 }, [heightState.height, heightState.isClipping]);
823
924 useLayoutEffect(() => {
1025 const element = contentRef.current;
......@@ -14,7 +29,13 @@ export function AnimatedHeight({ children }: { readonly children: ReactNode }) {
1429
1530 const updateHeight = () => {
1631 const nextHeight = Math.ceil(element.scrollHeight || element.getBoundingClientRect().height);
17 setHeight((currentHeight) => (currentHeight === nextHeight ? currentHeight : nextHeight));
32 setHeightState((currentState) => {
33 if (currentState.height === nextHeight) return currentState;
34 return {
35 height: nextHeight,
36 isClipping: currentState.height !== null,
37 };
38 });
1839 };
1940 const cancelPendingFrames = () => {
2041 if (firstFrameId !== null) {
......@@ -50,8 +71,19 @@ export function AnimatedHeight({ children }: { readonly children: ReactNode }) {
5071
5172 return (
5273 <div
53 className="overflow-hidden transition-[height] duration-200 ease-out motion-reduce:transition-none"
54 style={height === null ? undefined : { height }}
74 data-slot="animated-height"
75 className="transition-[height] duration-200 ease-out motion-reduce:transition-none"
76 style={
77 heightState.height === null
78 ? undefined
79 : { height: heightState.height, overflow: heightState.isClipping ? "hidden" : "visible" }
80 }
81 onTransitionEnd={(event) => {
82 if (event.target !== event.currentTarget || event.propertyName !== "height") return;
83 setHeightState((currentState) =>
84 currentState.isClipping ? { ...currentState, isClipping: false } : currentState,
85 );
86 }}
5587 >
5688 <div ref={contentRef}>{children}</div>
5789 </div>