Browse Source

fix(match): optimize initial match data hydration and prevent Error 418 hydration mismatch

mortezaei 2 weeks ago
parent
commit
37956b3d24
  1. 2
      src/app/new-match/new-match-client.tsx
  2. 6
      src/components/Componentes/discount-widget.tsx
  3. 31
      src/components/Componentes/information-sheet.test.tsx
  4. 12
      src/components/Componentes/information-sheet.tsx

2
src/app/new-match/new-match-client.tsx

@ -738,7 +738,7 @@ export default function NewMatchClient() {
</section>
{/* 2. Match Summary Card Section */}
<div className="w-full shrink-0">
<div className="w-full shrink-0" suppressHydrationWarning>
{(isLoading || (!matchSummary && isFetching)) ? (
<section className="relative overflow-hidden rounded-[24px] bg-[#FAFBFD] border border-[#F2E5E8] shadow-[0_4px_24px_rgba(0,0,0,0.04)] text-start">
<div className="relative h-[74px] w-full bg-[linear-gradient(180deg,#FCE2E6_0%,#FFD6DC_100%)]" />

6
src/components/Componentes/discount-widget.tsx

@ -157,12 +157,6 @@ export function DiscountWidget({
dir="auto"
value={code}
disabled={discountStatus === "loading" || discountResult !== null}
onFocus={(e) => {
const target = e.target;
setTimeout(() => {
target.scrollIntoView({ behavior: "smooth", block: "center" });
}, 150);
}}
onChange={(e) => {
setCode(e.target.value);
if (discountStatus !== "initial") {

31
src/components/Componentes/information-sheet.test.tsx

@ -100,5 +100,36 @@ describe("InformationSheet", () => {
expect(section?.style.paddingBottom).toBe("");
});
});
it("should immediately reset keyboard lift when input loses focus (focusOut)", async () => {
render(
<InformationSheet
isOpen={true}
title="Payment Sheet"
description={
<div>
<input type="text" placeholder="Enter code" data-testid="test-input-blur" />
</div>
}
/>,
);
const input = screen.getByTestId("test-input-blur");
const section = document.querySelector("section");
input.focus();
fireEvent.focusIn(input);
await waitFor(() => {
expect(section?.style.paddingBottom).not.toBe("");
});
input.blur();
fireEvent.focusOut(input);
await waitFor(() => {
expect(section?.style.paddingBottom).toBe("");
});
});
});

12
src/components/Componentes/information-sheet.tsx

@ -360,14 +360,6 @@ export function InformationSheet({
: getDefaultKeyboardHeight();
keyboardHeight = Math.max(keyboardHeight, expectedHeight);
setLift(keyboardHeight);
setTimeout(() => {
if (typeof (e.target as any)?.scrollIntoView === "function") {
(e.target as any).scrollIntoView({
behavior: "smooth",
block: "nearest",
});
}
}, 100);
}
};
@ -378,7 +370,7 @@ export function InformationSheet({
sheetRef.current?.contains(active) && isKeyboardInputTarget(active)
? (active as HTMLElement)
: null;
if (!activeInput && (viewPaddingsBridge.getConfig().keyboardHeight || 0) === 0) {
if (!activeInput) {
keyboardVisible = false;
keyboardHeight = 0;
setLift(0);
@ -445,7 +437,7 @@ export function InformationSheet({
const content = (
<div
className={[
"fixed inset-0 z-50 flex items-end justify-center overflow-y-auto",
"fixed inset-0 z-50 flex items-end justify-center overflow-hidden",
isClosing ? "flutter-scrim-exit" : "flutter-scrim",
]
.filter(Boolean)

Loading…
Cancel
Save