Merge pull request #6570 from KirilCycle/fix/list-box-keyboard-naviga…

…tion Fix: ListBox keyboard navigation like primevue
primefaces · Jul 3, 2024 · 6986b5b · 6986b5b
2 parents 58c235a + 99f41b4
commit 6986b5b
Showing 1 changed file with 21 additions and 43 deletions.
diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
@@ -650,7 +650,21 @@ export const ListBox = React.memo(
             return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
         };
 
+        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) {
                 const filterValue = filteredValue.trim().toLocaleLowerCase(props.filterLocale);
                 const searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
@@ -666,13 +680,13 @@ export const ListBox = 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 scrollToSelectedIndex = () => {
@@ -715,47 +729,12 @@ export const ListBox = React.memo(
             ) : null;
         };
 
-        const createGroupChildren = (optionGroup, style) => {
-            const groupChildren = getOptionGroupChildren(optionGroup);
-
-            return groupChildren.map((option, j) => {
-                const optionLabel = getOptionLabel(option);
-                const optionKey = j + '_' + getOptionRenderKey(option);
-                const disabled = isOptionDisabled(option);
-
-                return (
-                    <ListBoxItem
-                        id={id.current + '_' + j}
-                        hostName="ListBox"
-                        optionKey={optionKey}
-                        key={optionKey}
-                        label={optionLabel}
-                        option={option}
-                        style={style}
-                        template={props.itemTemplate}
-                        selected={isSelected(option)}
-                        onOptionMouseDown={onOptionMouseDown}
-                        onOptionMouseMove={onOptionMouseMove}
-                        onClick={onOptionSelect}
-                        index={j}
-                        focusedOptionIndex={focusedOptionIndex}
-                        onTouchEnd={onOptionTouchEnd}
-                        disabled={disabled}
-                        ptCallbacks={ptCallbacks}
-                        metaData={metaData}
-                    />
-                );
-            });
-        };
-
         const createItem = (option, index, scrollerOptions = {}) => {
             const style = { height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined };
 
-            if (props.optionGroupLabel) {
+            if (option.group && option.optionGroup && props.optionGroupLabel) {
                 const groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : getOptionGroupLabel(option);
-                const groupChildrenContent = createGroupChildren(option, style);
                 const key = index + '_' + getOptionGroupRenderKey(option);
-
                 const itemGroupProps = mergeProps(
                     {
                         className: ptCallbacks.cx('itemGroup'),
@@ -766,10 +745,9 @@ export const ListBox = React.memo(
                 );
 
                 return (
-                    <React.Fragment key={key}>
-                        <li {...itemGroupProps}>{groupContent}</li>
-                        {groupChildrenContent}
-                    </React.Fragment>
+                    <li key={key} {...itemGroupProps}>
+                        {groupContent}
+                    </li>
                 );
             }