Fix #4489: Dropdown add getVirtualScroller (#4491)

primefaces · Jun 7, 2023 · 8adf29c · 8adf29c
1 parent 51d856d
commit 8adf29c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
@@ -27,6 +27,7 @@ export const Dropdown = React.memo(
         const overlayRef = React.useRef(null);
         const inputRef = React.useRef(props.inputRef);
         const focusInputRef = React.useRef(props.focusInputRef);
+        const virtualScrollerRef = React.useRef(null);
         const searchTimeout = React.useRef(null);
         const searchValue = React.useRef(null);
         const currentSearchChar = React.useRef(null);
@@ -621,7 +622,8 @@ export const Dropdown = React.memo(
             getElement: () => elementRef.current,
             getOverlay: () => overlayRef.current,
             getInput: () => inputRef.current,
-            getFocusInput: () => focusInputRef.current
+            getFocusInput: () => focusInputRef.current,
+            getVirtualScroller: () => virtualScrollerRef.current
         }));
 
         React.useEffect(() => {
@@ -875,6 +877,7 @@ export const Dropdown = React.memo(
                     <DropdownPanel
                         ref={overlayRef}
                         visibleOptions={visibleOptions}
+                        virtualScrollerRef={virtualScrollerRef}
                         {...props}
                         appendTo={appendTo}
                         onClick={onPanelClick}

diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
@@ -11,7 +11,6 @@ import { DropdownItem } from './DropdownItem';
 export const DropdownPanel = React.memo(
     React.forwardRef((props, ref) => {
         const ptm = props.ptm;
-        const virtualScrollerRef = React.useRef(null);
         const filterInputRef = React.useRef(null);
         const isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
         const filterOptions = {
@@ -21,11 +20,11 @@ export const DropdownPanel = React.memo(
 
         const onEnter = () => {
             props.onEnter(() => {
-                if (virtualScrollerRef.current) {
+                if (props.virtualScrollerRef.current) {
                     const selectedIndex = props.getSelectedOptionIndex();
 
                     if (selectedIndex !== -1) {
-                        setTimeout(() => virtualScrollerRef.current.scrollToIndex(selectedIndex), 0);
+                        setTimeout(() => props.virtualScrollerRef.current.scrollToIndex(selectedIndex), 0);
                     }
                 }
             });
@@ -40,7 +39,7 @@ export const DropdownPanel = React.memo(
         };
 
         const onFilterInputChange = (event) => {
-            virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
+            props.virtualScrollerRef.current && props.virtualScrollerRef.current.scrollToIndex(0);
             props.onFilterInputChange && props.onFilterInputChange(event);
         };
 
@@ -242,7 +241,7 @@ export const DropdownPanel = React.memo(
                     }
                 };
 
-                return <VirtualScroller ref={virtualScrollerRef} {...virtualScrollerProps} pt={ptm('virtualScroller')} />;
+                return <VirtualScroller ref={props.virtualScrollerRef} {...virtualScrollerProps} pt={ptm('virtualScroller')} />;
             } else {
                 const items = createItems();
                 const wrapperProps = mergeProps(