From 145d94a49f5fa6b18a6d2502f52158d15137914a Mon Sep 17 00:00:00 2001
From: BrianHung <brianlhung@gmail.com>
Date: Fri, 8 Mar 2024 15:59:39 -0800
Subject: [PATCH 1/3] use readonly for growing entry and number overlay

---
 packages/core/src/cells/number-cell.tsx                        | 2 +-
 packages/core/src/cells/row-id-cell.tsx                        | 2 +-
 packages/core/src/cells/text-cell.tsx                          | 2 +-
 .../data-grid-overlay-editor/private/number-overlay-editor.tsx | 3 +++
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/cells/number-cell.tsx b/packages/core/src/cells/number-cell.tsx
index fd7d37260..9592506ac 100644
--- a/packages/core/src/cells/number-cell.tsx
+++ b/packages/core/src/cells/number-cell.tsx
@@ -27,7 +27,7 @@ export const numberCellRenderer: InternalCellRenderer<NumberCell> = {
             <React.Suspense fallback={null}>
                 <NumberOverlayEditor
                     highlight={isHighlighted}
-                    disabled={value.readonly === true}
+                    readOnly={value.readonly === true}
                     value={value.data}
                     fixedDecimals={value.fixedDecimals}
                     allowNegative={value.allowNegative}
diff --git a/packages/core/src/cells/row-id-cell.tsx b/packages/core/src/cells/row-id-cell.tsx
index 82a666796..15a14cd7c 100644
--- a/packages/core/src/cells/row-id-cell.tsx
+++ b/packages/core/src/cells/row-id-cell.tsx
@@ -19,7 +19,7 @@ export const rowIDCellRenderer: InternalCellRenderer<RowIDCell> = {
             <GrowingEntry
                 highlight={isHighlighted}
                 autoFocus={value.readonly !== true}
-                disabled={value.readonly !== false}
+                readOnly={value.readonly === true}
                 value={value.data}
                 validatedSelection={validatedSelection}
                 onChange={e =>
diff --git a/packages/core/src/cells/text-cell.tsx b/packages/core/src/cells/text-cell.tsx
index ce3a081ab..0e44ab7bb 100644
--- a/packages/core/src/cells/text-cell.tsx
+++ b/packages/core/src/cells/text-cell.tsx
@@ -71,7 +71,7 @@ export const textCellRenderer: InternalCellRenderer<TextCell> = {
                     style={cell.allowWrapping === true ? { padding: "3px 8.5px" } : undefined}
                     highlight={isHighlighted}
                     autoFocus={value.readonly !== true}
-                    disabled={value.readonly === true}
+                    readOnly={value.readonly === true}
                     altNewline={true}
                     value={value.data}
                     validatedSelection={validatedSelection}
diff --git a/packages/core/src/internal/data-grid-overlay-editor/private/number-overlay-editor.tsx b/packages/core/src/internal/data-grid-overlay-editor/private/number-overlay-editor.tsx
index 4a539916f..00fa7c7ee 100644
--- a/packages/core/src/internal/data-grid-overlay-editor/private/number-overlay-editor.tsx
+++ b/packages/core/src/internal/data-grid-overlay-editor/private/number-overlay-editor.tsx
@@ -7,6 +7,7 @@ import type { NumberFormatValues } from "react-number-format/types/types.js";
 interface Props {
     readonly value: number | undefined;
     readonly disabled?: boolean;
+    readonly readOnly?: boolean;
     readonly onChange: (values: NumberFormatValues) => void;
     readonly highlight: boolean;
     readonly validatedSelection?: SelectionRange;
@@ -34,6 +35,7 @@ const NumberOverlayEditor: React.FunctionComponent<Props> = p => {
         value,
         onChange,
         disabled,
+        readOnly,
         highlight,
         validatedSelection,
         fixedDecimals,
@@ -61,6 +63,7 @@ const NumberOverlayEditor: React.FunctionComponent<Props> = p => {
                     e.target.setSelectionRange(highlight ? 0 : e.target.value.length, e.target.value.length)
                 }
                 disabled={disabled === true}
+                readOnly={readOnly === true}
                 decimalScale={fixedDecimals}
                 allowNegative={allowNegative}
                 thousandSeparator={thousandSeparator ?? getThousandSeprator()}

From 48d9645b69e7144b32c96731daf97c0e4a7f984f Mon Sep 17 00:00:00 2001
From: BrianHung <brianlhung@gmail.com>
Date: Fri, 8 Mar 2024 16:00:16 -0800
Subject: [PATCH 2/3] autofocus overlay editor on mount

---
 .../data-grid-overlay-editor.tsx                     | 12 +++++++++---
 .../private/bubbles-overlay-editor.tsx               |  1 -
 .../private/markdown-overlay-editor.tsx              |  1 -
 .../private/uri-overlay-editor.tsx                   |  1 -
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx b/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx
index 28850bcbc..0c1e605c5 100644
--- a/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx
+++ b/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx
@@ -220,7 +220,10 @@ const DataGridOverlayEditor: React.FunctionComponent<DataGridOverlayEditorProps>
                 onClickOutside={onClickOutside}
                 isOutsideClick={isOutsideClick}>
                 <DataGridOverlayEditorStyle
-                    ref={ref}
+                    ref={elem => {
+                        ref(elem);
+                        if (elem) elem.focus();
+                    }}
                     id={id}
                     className={classWrap}
                     style={styleOverride}
@@ -228,8 +231,11 @@ const DataGridOverlayEditor: React.FunctionComponent<DataGridOverlayEditorProps>
                     targetX={target.x - bloomX}
                     targetY={target.y - bloomY}
                     targetWidth={target.width + bloomX * 2}
-                    targetHeight={target.height + bloomY * 2}>
-                    <div className="gdg-clip-region" onKeyDown={onKeyDown}>
+                    targetHeight={target.height + bloomY * 2}
+                    tabIndex={-1}
+                    onKeyDown={onKeyDown}
+                >
+                    <div className="gdg-clip-region">
                         {editor}
                     </div>
                 </DataGridOverlayEditorStyle>
diff --git a/packages/core/src/internal/data-grid-overlay-editor/private/bubbles-overlay-editor.tsx b/packages/core/src/internal/data-grid-overlay-editor/private/bubbles-overlay-editor.tsx
index 6fefcd931..bfcdcf22f 100644
--- a/packages/core/src/internal/data-grid-overlay-editor/private/bubbles-overlay-editor.tsx
+++ b/packages/core/src/internal/data-grid-overlay-editor/private/bubbles-overlay-editor.tsx
@@ -14,7 +14,6 @@ const BubblesOverlayEditor: React.FunctionComponent<Props> = p => {
                     {b}
                 </div>
             ))}
-            <textarea className="gdg-input" autoFocus={true} />
         </BubblesOverlayEditorStyle>
     );
 };
diff --git a/packages/core/src/internal/data-grid-overlay-editor/private/markdown-overlay-editor.tsx b/packages/core/src/internal/data-grid-overlay-editor/private/markdown-overlay-editor.tsx
index abecf2dac..c96ea523a 100644
--- a/packages/core/src/internal/data-grid-overlay-editor/private/markdown-overlay-editor.tsx
+++ b/packages/core/src/internal/data-grid-overlay-editor/private/markdown-overlay-editor.tsx
@@ -59,7 +59,6 @@ export const MarkdownOverlayEditor: React.FunctionComponent<Props> = p => {
                     </div>
                 </>
             )}
-            <textarea className="gdg-md-edit-textarea gdg-input" autoFocus={true} />
         </MarkdownOverlayEditorStyle>
     );
 };
diff --git a/packages/core/src/internal/data-grid-overlay-editor/private/uri-overlay-editor.tsx b/packages/core/src/internal/data-grid-overlay-editor/private/uri-overlay-editor.tsx
index 08cdab7de..4dc76c451 100644
--- a/packages/core/src/internal/data-grid-overlay-editor/private/uri-overlay-editor.tsx
+++ b/packages/core/src/internal/data-grid-overlay-editor/private/uri-overlay-editor.tsx
@@ -44,7 +44,6 @@ const UriOverlayEditor: React.FunctionComponent<Props> = p => {
                     <EditPencil />
                 </div>
             )}
-            <textarea className="gdg-input" autoFocus={true} />
         </UriOverlayEditorStyle>
     );
 };

From c944cbeee0c01bc1f95aac971aae0ad0513ceefd Mon Sep 17 00:00:00 2001
From: BrianHung <brianlhung@gmail.com>
Date: Sun, 16 Jun 2024 01:54:02 -0700
Subject: [PATCH 3/3] add test case

---
 .../data-grid-overlay-editor-style.tsx        |   4 +
 .../data-grid-overlay-editor.tsx              |   1 +
 .../private/markdown-overlay-editor.tsx       |   2 +
 packages/core/test/data-editor.test.tsx       | 123 +++++++++++++++++-
 packages/core/test/data-grid-overlay.test.tsx |   2 +-
 setup-react-18-test.sh                        |   2 +-
 6 files changed, 130 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.tsx b/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.tsx
index 0b19ab6d4..6eb5b9192 100644
--- a/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.tsx
+++ b/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.tsx
@@ -47,6 +47,10 @@ export const DataGridOverlayEditorStyle = styled.div<Props>`
             0px 6px 12px rgba(62, 65, 86, 0.15);
 
         animation: glide_fade_in 60ms 1;
+
+        &:focus {
+            outline: none;
+        }
     }
 
     &.gdg-pad {
diff --git a/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx b/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx
index 0c1e605c5..45b8af616 100644
--- a/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx
+++ b/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx
@@ -225,6 +225,7 @@ const DataGridOverlayEditor: React.FunctionComponent<DataGridOverlayEditorProps>
                         if (elem) elem.focus();
                     }}
                     id={id}
+                    data-testid="data-grid-overlay-editor"
                     className={classWrap}
                     style={styleOverride}
                     as={useLabel === true ? "label" : undefined}
diff --git a/packages/core/src/internal/data-grid-overlay-editor/private/markdown-overlay-editor.tsx b/packages/core/src/internal/data-grid-overlay-editor/private/markdown-overlay-editor.tsx
index c96ea523a..ed862f6d1 100644
--- a/packages/core/src/internal/data-grid-overlay-editor/private/markdown-overlay-editor.tsx
+++ b/packages/core/src/internal/data-grid-overlay-editor/private/markdown-overlay-editor.tsx
@@ -62,3 +62,5 @@ export const MarkdownOverlayEditor: React.FunctionComponent<Props> = p => {
         </MarkdownOverlayEditorStyle>
     );
 };
+
+export default MarkdownOverlayEditor;
diff --git a/packages/core/test/data-editor.test.tsx b/packages/core/test/data-editor.test.tsx
index 9eb2dd34f..28733ee32 100644
--- a/packages/core/test/data-editor.test.tsx
+++ b/packages/core/test/data-editor.test.tsx
@@ -9,7 +9,7 @@ import {
     isSizedGridColumn,
     type Item,
 } from "../src/index.js";
-import type { CustomCell } from "../src/internal/data-grid/data-grid-types.js";
+import type { CustomCell, SizedGridColumn } from "../src/internal/data-grid/data-grid-types.js";
 import type { DataEditorRef } from "../src/data-editor/data-editor.js";
 import { assert } from "../src/common/support.js";
 import { vi, type Mock, expect, describe, test, beforeEach, afterEach } from "vitest";
@@ -1352,7 +1352,7 @@ describe("data-editor", () => {
         expect(document.body.contains(overlay)).toBe(false);
     });
 
-    test("Open markdown overlay", async () => {
+    test("Open and close markdown overlay", async () => {
         vi.useFakeTimers();
         render(<DataEditor {...basicProps} />, {
             wrapper: Context,
@@ -1384,6 +1384,125 @@ describe("data-editor", () => {
         expect(document.body.contains(overlay)).toBe(false);
     });
 
+    test("Open and close overlays", async () => {
+        vi.useFakeTimers();
+
+        const columns = basicProps.columns.slice(0, 5);
+        const getCellContent: (typeof basicProps)["getCellContent"] = c => {
+            const [col, row] = c;
+            switch (col) {
+                case 0: {
+                    return {
+                        kind: GridCellKind.Bubble,
+                        allowOverlay: true,
+                        data: ["Foobar"],
+                        readOnly: true,
+                    };
+                }
+                case 1: {
+                    return {
+                        kind: GridCellKind.Drilldown,
+                        allowOverlay: true,
+                        data: [
+                            {
+                                img: "https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_1280.jpg",
+                                text: "Foobar",
+                            },
+                        ],
+                        readOnly: true,
+                    };
+                }
+                case 2: {
+                    return {
+                        kind: GridCellKind.Image,
+                        data: [
+                            "https://i.imgur.com/5J0BftG.jpg",
+                            "https://preview.redd.it/7jlqkp2cyap51.jpg?width=575&auto=webp&s=26fa9ed15b16fb450ee08ed1f2f0ccb5e0223581",
+                        ],
+                        allowOverlay: true,
+                        readOnly: true,
+                    };
+                }
+                case 3: {
+                    return {
+                        kind: GridCellKind.Markdown,
+                        allowOverlay: true,
+                        data: `# Header: ${col}, ${row}`,
+                        readOnly: true,
+                    };
+                }
+                case 4: {
+                    return {
+                        kind: GridCellKind.Number,
+                        allowOverlay: true,
+                        data: row,
+                        displayData: row.toString(),
+                        readOnly: true,
+                    };
+                }
+                case 5: {
+                    return {
+                        kind: GridCellKind.Uri,
+                        allowOverlay: true,
+                        data: "https://www.google.com",
+                        readOnly: true,
+                    };
+                }
+            }
+
+            return basicProps.getCellContent(c);
+        };
+
+        render(
+            <DataEditor 
+                {...basicProps} 
+                columns={columns}
+                getCellContent={getCellContent}
+            />, 
+            {
+                wrapper: Context,
+            }
+        );
+        prep();
+
+        const canvas = screen.getByTestId("data-grid-canvas");
+
+        let clientX = 10;
+        for (const col of columns) {
+            // Double click to open overlay
+            sendClick(canvas, {
+                clientX,
+                clientY: 36 + 32 + 16, // Row 1 (0 indexed)
+            });
+
+            sendClick(canvas, {
+                clientX,
+                clientY: 36 + 32 + 16, // Row 1 (0 indexed)
+            });
+
+            // Single click on overlay editor
+            sendClick(canvas, {
+                clientX,
+                clientY: 36 + 32 + 16, // Row 1 (0 indexed)
+            });
+
+            const overlay = screen.getByTestId("data-grid-overlay-editor")
+            expect(document.body.contains(overlay)).toBe(true);
+    
+            vi.useFakeTimers();
+            fireEvent.keyDown(canvas, {
+                key: "Escape",
+            });
+            act(() => {
+                vi.runAllTimers();
+            });
+    
+            expect(document.body.contains(overlay)).toBe(false);
+
+            clientX += (col as SizedGridColumn).width;
+        }
+    })
+
     test("Open overlay with keypress", async () => {
         vi.useFakeTimers();
         render(<DataEditor {...basicProps} />, {
diff --git a/packages/core/test/data-grid-overlay.test.tsx b/packages/core/test/data-grid-overlay.test.tsx
index 69d5ec0d3..59a2ae685 100644
--- a/packages/core/test/data-grid-overlay.test.tsx
+++ b/packages/core/test/data-grid-overlay.test.tsx
@@ -3,7 +3,7 @@ import { render, cleanup } from "@testing-library/react";
 import BubblesOverlayEditor from "../src/internal/data-grid-overlay-editor/private/bubbles-overlay-editor.js";
 import DrilldownOverlayEditor from "../src/internal/data-grid-overlay-editor/private/drilldown-overlay-editor.js";
 import { GridCellKind, ImageOverlayEditor } from "../src/index.js";
-import { MarkdownOverlayEditor } from "../src/internal/data-grid-overlay-editor/private/markdown-overlay-editor.js";
+import MarkdownOverlayEditor from "../src/internal/data-grid-overlay-editor/private/markdown-overlay-editor.js";
 import NumberOverlayEditor from "../src/internal/data-grid-overlay-editor/private/number-overlay-editor.js";
 import UriOverlayEditor from "../src/internal/data-grid-overlay-editor/private/uri-overlay-editor.js";
 import { vi, describe, test, afterEach } from "vitest";
diff --git a/setup-react-18-test.sh b/setup-react-18-test.sh
index f68e8f92a..18bab1a5e 100755
--- a/setup-react-18-test.sh
+++ b/setup-react-18-test.sh
@@ -1,3 +1,3 @@
 #!/bin/bash
 
-npm i -D react@latest react-dom@latest @testing-library/react@latest @testing-library/react-hooks@latest @testing-library/user-event@14.5.1 react-test-renderer@latest
\ No newline at end of file
+npm i -D react@latest react-dom@latest @testing-library/react@latest @testing-library/react-hooks@latest @testing-library/user-event@14.5.1 react-test-renderer@latest @testing-library/dom
\ No newline at end of file