- 1. Click "edit" button on any item
- 2. Modify text
- 3. Scroll that item out of view and back - the editor state is not lost, and
- item in edit mode is not unmounted when goes offscreen
+ 1. Click "edit" button on any item
+
+ 2. Modify text
+
+ 3. Scroll that item out of view and back - the editor state is not
+ lost, and item in edit mode is not unmounted when goes offscreen
item.id === editingItemId)]
- : undefined
+ keepMounted={
+ editingItemId
+ ? [items.findIndex((item) => item.id === editingItemId)]
+ : undefined
}
shift
onScroll={(offset) => {
@@ -137,8 +204,12 @@ export const Default: StoryObj = {
}}
>
{items.map((d) => (
-
diff --git a/stories/react/advanced/With radix-ui.stories.tsx b/stories/react/advanced/With radix-ui.stories.tsx
index fd5eae406..6075bddda 100644
--- a/stories/react/advanced/With radix-ui.stories.tsx
+++ b/stories/react/advanced/With radix-ui.stories.tsx
@@ -1,21 +1,28 @@
import { Meta, StoryObj } from "@storybook/react";
-import { Virtualizer } from "../../../src";
-import React, { useRef } from "react";
+import { Virtualizer, VirtualizerHandle } from "../../../src";
+import React, { useLayoutEffect, useMemo, useRef, useState } from "react";
import { faker } from "@faker-js/faker";
import * as ScrollArea from "@radix-ui/react-scroll-area";
-import "./radix.css";
+import * as Select from "@radix-ui/react-select";
+import {
+ CheckIcon,
+ ChevronDownIcon,
+ ChevronUpIcon,
+} from "@radix-ui/react-icons";
+import "./radix-scroll-area.css";
+import "./radix-select.css";
+
+export default {
+ component: Virtualizer,
+} as Meta;
const TAGS = Array.from({ length: 1000 }).map((_, i) => ({
id: i,
label: faker.person.fullName(),
}));
-export default {
- component: Virtualizer,
-} as Meta;
-
-export const Default: StoryObj = {
- name: "With radix-ui",
+export const _ScrollArea: StoryObj = {
+ name: "Scroll Area",
render: () => {
const ref = useRef