Merge pull request #6430 from KirilCycle/fix/drop-down-menu-navigation

Fix #6124 : Dropdown navigation like PrimeVue
primefaces · Apr 29, 2024 · b5ed11d · b5ed11d
2 parents 6a8c91d + c774167
commit b5ed11d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 42 deletions.
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
@@ -57,7 +57,21 @@ export const Dropdown = React.memo(
             when: overlayVisibleState
         });
 
+        const flatOptions = (options) => {
+            return (options || []).reduce((result, option, index) => {
+                result.push({ optionGroup: option, group: true, index, code: option.code, label: option.label });
+
+                const optionGroupChildren = getOptionGroupChildren(option);
+
+                optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));
+
+                return result;
+            }, []);
+        };
+
         const getVisibleOptions = () => {
+            const options = props.optionGroupLabel ? flatOptions(props.options) : props.options;
+
             if (hasFilter && !isLazy) {
                 const filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
                 const searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
@@ -73,13 +87,13 @@ export const Dropdown = React.memo(
                         }
                     }
 
-                    return filteredGroups;
+                    return flatOptions(filteredGroups);
                 }
 
-                return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+                return FilterService.filter(options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
             }
 
-            return props.options;
+            return options;
         };
 
         const onFirstHiddenFocus = (event) => {

diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
@@ -76,36 +76,6 @@ export const DropdownPanel = React.memo(
             }
         };
 
-        const createGroupChildren = (optionGroup, style) => {
-            const groupChildren = props.getOptionGroupChildren(optionGroup);
-
-            return groupChildren.map((option, j) => {
-                const optionLabel = props.getOptionLabel(option);
-                const optionKey = j + '_' + props.getOptionRenderKey(option);
-                const disabled = props.isOptionDisabled(option);
-
-                return (
-                    <DropdownItem
-                        key={optionKey}
-                        index={j}
-                        focusedOptionIndex={props.focusedOptionIndex}
-                        label={optionLabel}
-                        option={option}
-                        style={style}
-                        template={props.itemTemplate}
-                        selected={props.isSelected(option)}
-                        highlightOnSelect={props.highlightOnSelect}
-                        disabled={disabled}
-                        onClick={props.onOptionClick}
-                        onMouseMove={changeFocusedItemOnHover}
-                        ptm={ptm}
-                        cx={cx}
-                        checkmark={props.checkmark}
-                    />
-                );
-            });
-        };
-
         const createEmptyMessage = (emptyMessage, isFilter) => {
             const message = ObjectUtils.getJSXElement(emptyMessage, props) || localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
             const emptyMessageProps = mergeProps(
@@ -123,10 +93,9 @@ export const DropdownPanel = React.memo(
 
             style = { ...style, ...option.style };
 
-            if (props.optionGroupLabel) {
+            if (option.group && props.optionGroupLabel) {
                 const { optionGroupLabel } = props;
                 const groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
-                const groupChildrenContent = createGroupChildren(option, style);
                 const key = index + '_' + props.getOptionGroupRenderKey(option);
                 const itemGroupProps = mergeProps(
                     {
@@ -144,17 +113,14 @@ export const DropdownPanel = React.memo(
                 );
 
                 return (
-                    <React.Fragment key={key}>
-                        <li {...itemGroupProps}>
-                            <span {...itemGroupLabelProps}>{groupContent}</span>
-                        </li>
-                        {groupChildrenContent}
-                    </React.Fragment>
+                    <li key={key} {...itemGroupProps}>
+                        <span {...itemGroupLabelProps}>{groupContent}</span>
+                    </li>
                 );
             }
 
+            const optionKey = props.getOptionRenderKey(option) + '_' + index;
             const optionLabel = props.getOptionLabel(option);
-            const optionKey = index + '_' + props.getOptionRenderKey(option);
             const disabled = props.isOptionDisabled(option);
 
             return (