feat:CascadeSelect support scroll in container

primefaces · Jan 10, 2024 · 972bb7d · 972bb7d
1 parent 8057a85
commit 972bb7d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 26 deletions.
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
@@ -242,11 +242,16 @@ export const CascadeSelect = React.memo(
         overflow: ${props.scrollHeight ? 'auto' : ''};
     }
 
+    .p-cascadeselect-panel[${selector}] .p-cascadeselect-sublist-wrapper {
+        position:relative;
+        left:0 !important;
+    }
+
     .p-cascadeselect-panel[${selector}] .p-cascadeselect-sublist {
-        position: relative;
+        overflow: hidden !important;
     }
 
-    .p-cascadeselect-panel[${selector}] .p-cascadeselect-item-active > .p-cascadeselect-sublist {
+    .p-cascadeselect-panel[${selector}] .p-cascadeselect-item-active  .p-cascadeselect-sublist {
         left: 0;
         box-shadow: none;
         border-radius: 0;

diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js
@@ -24,6 +24,7 @@ const classes = {
             'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
             'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
         }),
+    sublistWrapper: 'p-cascadeselect-sublist-wrapper',
     sublist: 'p-cascadeselect-panel p-cascadeselect-items p-cascadeselect-sublist',
     item: ({ option, isGroup, isSelected }) =>
         classNames('p-cascadeselect-item', {
@@ -77,12 +78,6 @@ const styles = `
         min-width: 100%;
     }
     
-    .p-cascadeselect-panel {
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-    
     .p-cascadeselect-item {
         cursor: pointer;
         font-weight: normal;
@@ -115,7 +110,7 @@ const styles = `
         width: 1%;
     }
     
-    .p-cascadeselect-sublist {
+    .p-cascadeselect-sublist-wrapper {
         position: absolute;
         min-width: 100%;
         z-index: 1;
@@ -126,7 +121,7 @@ const styles = `
         overflow: visible;
     }
     
-    .p-cascadeselect-item-active > .p-cascadeselect-sublist {
+    .p-cascadeselect-item-active > .p-cascadeselect-sublist-wrapper {
         display: block;
         left: 100%;
         top: 0;

diff --git a/components/lib/cascadeselect/CascadeSelectSub.js b/components/lib/cascadeselect/CascadeSelectSub.js
@@ -18,14 +18,14 @@ export const CascadeSelectSub = React.memo((props) => {
     };
 
     const position = () => {
-        const parentItem = elementRef.current.parentElement;
+        const parentItem = elementRef.current.parentElement.parentElement;
         const containerOffset = DomHandler.getOffset(parentItem);
         const viewport = DomHandler.getViewport();
         const sublistWidth = elementRef.current.offsetParent ? elementRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(element);
         const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
 
         if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
-            elementRef.current.style.left = '-100%';
+            elementRef.current.parentElement.style.left = '-100%';
         }
     };
 
@@ -268,16 +268,34 @@ export const CascadeSelectSub = React.memo((props) => {
         return props.options ? props.options.map(createOption) : null;
     };
 
-    const submenu = createMenu();
-    const listProps = mergeProps(
-        {
-            ref: elementRef,
-            className: cx(props.level === 0 ? 'list' : 'sublist', { context }),
-            role: 'listbox',
-            'aria-orientation': 'horizontal'
-        },
-        props.level === 0 ? getPTOptions('list') : getPTOptions('sublist')
-    );
-
-    return <ul {...listProps}>{submenu}</ul>;
+    const createList = () => {
+        const listProps = mergeProps(
+            {
+                ref: elementRef,
+                className: cx(props.level === 0 ? 'list' : 'sublist', { context }),
+                role: 'listbox',
+                'aria-orientation': 'horizontal'
+            },
+            props.level === 0 ? getPTOptions('list') : getPTOptions('sublist')
+        );
+        const submenu = createMenu();
+
+        return <ul {...listProps}>{submenu}</ul>;
+    };
+
+    const createElement = () => {
+        const list = createList();
+        const listWrapperProps = mergeProps(
+            {
+                className: cx('sublistWrapper')
+            },
+            getPTOptions('sublistWrapper')
+        );
+
+        return props.level === 0 ? list : <div {...listWrapperProps}>{list}</div>;
+    };
+
+    const element = createElement();
+
+    return element;
 });
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
@@ -849,10 +849,13 @@ const Tailwind = {
         dropdownButton: {
             className: classNames('flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/80 w-[3rem] rounded-tr-6 rounded-br-6')
         },
-        panel: 'absolute py-3 bg-white dark:bg-gray-900 border-0 shadow-md',
+        panel: 'py-3 bg-white dark:bg-gray-900 border-0 shadow-md',
         list: 'm-0 sm:p-0 list-none',
+        sublistWrapper: {
+            className: classNames('block absolute left-full top-0', 'min-w-full z-10')
+        },
         sublist: {
-            className: classNames('block absolute left-full top-0', 'min-w-full z-10', 'py-3 bg-white dark:bg-gray-900 border-0 shadow-md')
+            className: classNames('py-3 bg-white dark:bg-gray-900 border-0 shadow-md')
         },
         item: ({ state }) => ({
             className: classNames('cursor-pointer font-normal whitespace-nowrap', 'm-0 border-0 bg-transparent transition-shadow rounded-none', {