From 469b9323ad01e7076ef0445a205e944193ca33e9 Mon Sep 17 00:00:00 2001 From: Edwar Plata Date: Mon, 21 Oct 2024 11:25:19 -0500 Subject: [PATCH 1/4] fix: SC-59775 fix nested select height after long render --- src/inputs/hooks/useGrowingTextField.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/inputs/hooks/useGrowingTextField.tsx b/src/inputs/hooks/useGrowingTextField.tsx index b933dc700..7097ad6d2 100644 --- a/src/inputs/hooks/useGrowingTextField.tsx +++ b/src/inputs/hooks/useGrowingTextField.tsx @@ -42,6 +42,8 @@ export function useGrowingTextField({ inputRef, inputWrapRef, value, disabled }: return; } onHeightChange(); + // This is a hack to re-measure the height of the textarea after all the content has been rendered (i.e. after multiple GridTable children have been rendered) + setTimeout(() => onHeightChange(), 200); } }, [onHeightChange, value, inputRef, disabled, inputWrapRef]); } From 39a5a846163293bec23e587b0994244cbb06eb4a Mon Sep 17 00:00:00 2001 From: Edwar Plata Date: Wed, 23 Oct 2024 09:10:50 -0500 Subject: [PATCH 2/4] chore: add storybook --- .../hooks/useGrowingTextField.stories.tsx | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 src/inputs/hooks/useGrowingTextField.stories.tsx diff --git a/src/inputs/hooks/useGrowingTextField.stories.tsx b/src/inputs/hooks/useGrowingTextField.stories.tsx new file mode 100644 index 000000000..5c892550e --- /dev/null +++ b/src/inputs/hooks/useGrowingTextField.stories.tsx @@ -0,0 +1,73 @@ +import { Meta } from "@storybook/react"; +import { useCallback, useMemo, useState } from "react"; +import { Button, collapseColumn, column, GridColumn, GridDataRow, GridTable, simpleHeader } from "src/components"; +import { Css } from "src/Css"; +import { withRouter, zeroTo } from "src/utils/sb"; +import { SelectField } from "../SelectField"; + +export default { + component: GridTable, + parameters: { layout: "fullscreen", backgrounds: { default: "white" } }, + decorators: [withRouter()], +} as Meta; + +export function InVirtualizedTable() { + const [extraColumn, setExtraColumn] = useState(false); + const loadRows = useCallback((offset: number) => { + return zeroTo(50).map((i) => ({ + kind: "data" as const, + id: String(i + offset), + data: { name: `row ${i + offset}`, value: i + offset }, + })); + }, []); + + const options = useMemo(() => { + return zeroTo(50).map((i) => ({ id: i, name: `option ${i}` })); + }, []); + + const [data, setData] = useState[]>(() => loadRows(0)); + const rows: GridDataRow[] = useMemo(() => [simpleHeader, ...data], [data]); + const columns: GridColumn[] = useMemo( + () => [ + ...(extraColumn ? [collapseColumn()] : []), + column({ header: "Name", data: ({ name }) => name, w: "100px" }), + column({ + header: "Value", + data: ({ value }) => ( + {}} + getOptionLabel={(o) => o.name} + getOptionValue={(o) => o.id} + /> + ), + w: "200px", + }), + ], + [extraColumn, options], + ); + return ( +
+
+ ); +} + +type HeaderRow = { kind: "header"; data: undefined }; +type ChildRow = { kind: "data"; id: string; data: { name: string; value: number } }; + +type Row = HeaderRow | ChildRow; From f1b02b43b06c0b0a2858daecdb2dc70f04699f3e Mon Sep 17 00:00:00 2001 From: Edwar Plata Date: Fri, 25 Oct 2024 11:07:09 -0500 Subject: [PATCH 3/4] fix: Toggle extra column in useGrowingTextField.stories.tsx --- src/inputs/hooks/useGrowingTextField.stories.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/inputs/hooks/useGrowingTextField.stories.tsx b/src/inputs/hooks/useGrowingTextField.stories.tsx index 5c892550e..69324169c 100644 --- a/src/inputs/hooks/useGrowingTextField.stories.tsx +++ b/src/inputs/hooks/useGrowingTextField.stories.tsx @@ -6,13 +6,12 @@ import { withRouter, zeroTo } from "src/utils/sb"; import { SelectField } from "../SelectField"; export default { - component: GridTable, parameters: { layout: "fullscreen", backgrounds: { default: "white" } }, decorators: [withRouter()], } as Meta; export function InVirtualizedTable() { - const [extraColumn, setExtraColumn] = useState(false); + const [extraColumn, setExtraColumn] = useState(true); const loadRows = useCallback((offset: number) => { return zeroTo(50).map((i) => ({ kind: "data" as const, @@ -67,6 +66,12 @@ export function InVirtualizedTable() { ); } +InVirtualizedTable.play = async ({ canvasElement }: { canvasElement: HTMLElement }) => { + const button = canvasElement.querySelector("button"); + // When we toggle the extra column, the table will re-render + button?.click(); +}; + type HeaderRow = { kind: "header"; data: undefined }; type ChildRow = { kind: "data"; id: string; data: { name: string; value: number } }; From 48cc4ec951c2cb2c4ccc047d8d3974cd2cc93416 Mon Sep 17 00:00:00 2001 From: Edwar Plata Date: Fri, 25 Oct 2024 11:44:48 -0500 Subject: [PATCH 4/4] fix: PR feedback --- src/inputs/hooks/useGrowingTextField.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/inputs/hooks/useGrowingTextField.tsx b/src/inputs/hooks/useGrowingTextField.tsx index 7097ad6d2..f361ed1d2 100644 --- a/src/inputs/hooks/useGrowingTextField.tsx +++ b/src/inputs/hooks/useGrowingTextField.tsx @@ -43,6 +43,7 @@ export function useGrowingTextField({ inputRef, inputWrapRef, value, disabled }: } onHeightChange(); // This is a hack to re-measure the height of the textarea after all the content has been rendered (i.e. after multiple GridTable children have been rendered) + // See the InVirtualizedTable storybook for reproducing this behavior setTimeout(() => onHeightChange(), 200); } }, [onHeightChange, value, inputRef, disabled, inputWrapRef]);