Refactor #4052

primefaces · Feb 14, 2023 · 91bc90f · 91bc90f
1 parent 9b86166
commit 91bc90f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
@@ -209,6 +209,11 @@ export const CascadeSelect = React.memo(
                 const selector = `${attributeSelectorState}_panel`;
                 const innerHTML = `
 @media screen and (max-width: ${props.breakpoint}) {
+    .p-cascadeselect-panel[${selector}] .p-cascadeselect-items-wrapper > ul {
+        max-height: ${props.scrollHeight};
+        overflow: ${props.scrollHeight ? 'auto' : ''};
+    }
+
     .p-cascadeselect-panel[${selector}] .p-cascadeselect-sublist {
         position: relative;
     }

diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js
@@ -25,6 +25,7 @@ export const CascadeSelectBase = {
         appendTo: null,
         transitionOptions: null,
         dropdownIcon: 'pi pi-chevron-down',
+        scrollHeight: '400px',
         onChange: null,
         onGroupChange: null,
         onBeforeShow: null,

diff --git a/components/lib/cascadeselect/cascadeselect.d.ts b/components/lib/cascadeselect/cascadeselect.d.ts
@@ -132,6 +132,11 @@ export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.I
      * @defaultValue pi pi-chevron-down
      */
     dropdownIcon?: string | undefined;
+    /**
+     * Maximum height of the options panel on responsive mode.
+     * @defaultValue 400px
+     */
+    scrollHeight?: string | undefined;
     /**
      * Callback to invoke on value change
      * @param {CascadeSelectChangeEvent} event - Custom change event