[Autocomplete] Correct example of virtualization (#20496)

mui · Apr 11, 2020 · 54ace65 · 54ace65
1 parent f270743
commit 54ace65
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/docs/src/pages/components/autocomplete/Virtualize.js b/docs/src/pages/components/autocomplete/Virtualize.js
@@ -27,6 +27,16 @@ const OuterElementType = React.forwardRef((props, ref) => {
   return <div ref={ref} {...props} {...outerProps} />;
 });
 
+function useResetCache(data) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (ref.current != null) {
+      ref.current.resetAfterIndex(0, true);
+    }
+  }, [data]);
+  return ref;
+}
+
 // Adapter for react-window
 const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {
   const { children, ...other } = props;
@@ -51,14 +61,16 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref)
     return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
   };
 
+  const gridRef = useResetCache(itemCount);
+
   return (
     <div ref={ref}>
       <OuterElementContext.Provider value={other}>
         <VariableSizeList
           itemData={itemData}
           height={getHeight() + 2 * LISTBOX_PADDING}
           width="100%"
-          key={itemCount}
+          ref={gridRef}
           outerElementType={OuterElementType}
           innerElementType="ul"
           itemSize={(index) => getChildSize(itemData[index])}
@@ -89,6 +101,7 @@ function random(length) {
 
 const useStyles = makeStyles({
   listbox: {
+    boxSizing: 'border-box',
     '& ul': {
       padding: 0,
       margin: 0,

diff --git a/docs/src/pages/components/autocomplete/Virtualize.tsx b/docs/src/pages/components/autocomplete/Virtualize.tsx
@@ -26,6 +26,16 @@ const OuterElementType = React.forwardRef<HTMLDivElement>((props, ref) => {
   return <div ref={ref} {...props} {...outerProps} />;
 });
 
+function useResetCache(data: any) {
+  const ref = React.useRef<VariableSizeList>(null);
+  React.useEffect(() => {
+    if (ref.current != null) {
+      ref.current.resetAfterIndex(0, true);
+    }
+  }, [data]);
+  return ref;
+}
+
 // Adapter for react-window
 const ListboxComponent = React.forwardRef<HTMLDivElement>(function ListboxComponent(props, ref) {
   const { children, ...other } = props;
@@ -50,14 +60,16 @@ const ListboxComponent = React.forwardRef<HTMLDivElement>(function ListboxCompon
     return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
   };
 
+  const gridRef = useResetCache(itemCount);
+
   return (
     <div ref={ref}>
       <OuterElementContext.Provider value={other}>
         <VariableSizeList
           itemData={itemData}
           height={getHeight() + 2 * LISTBOX_PADDING}
           width="100%"
-          key={itemCount}
+          ref={gridRef}
           outerElementType={OuterElementType}
           innerElementType="ul"
           itemSize={(index) => getChildSize(itemData[index])}
@@ -84,6 +96,7 @@ function random(length: number) {
 
 const useStyles = makeStyles({
   listbox: {
+    boxSizing: 'border-box',
     '& ul': {
       padding: 0,
       margin: 0,