fix(pf4): add nested filtering for select

Author: rvsia

packages/pf4-component-mapper/src/select/select/menu.js

@@ -117,8 +117,26 @@ const Menu = ({
   menuPortalTarget,
   menuIsPortal,
   selectToggleRef,
+  originalOptions,
 }) => {
-  const filteredOptions = isSearchable ? filterOptions(options, filterValue) : options;
+  const filteredOptions = isSearchable ? filterOptions(originalOptions, filterValue) : originalOptions;
+
+  let index = 0;
+
+  const createOption = (item) => {
+    index++;
+
+    const itemProps = getItemProps({
+      item,
+      index,
+      isActive: highlightedIndex === index,
+      isSelected: isMulti ? !!selectedItem.find(({ value }) => item.value === value) : selectedItem === item.value,
+      onMouseUp: (e) => e.stopPropagation(), // we need this to prevent issues with portal menu not selecting a option
+    });
+
+    return <Option key={item.key || item.value || (typeof item.label === 'string' && item.label) || item} item={item} {...itemProps} />;
+  };
+
   const menuItems = (
     <ul className={`pf-c-select__menu${menuIsPortal ? ' ddorg__pf4-component-mapper__select-menu-portal' : ''}`}>
       {filteredOptions.length === 0 && (
@@ -130,11 +148,12 @@ const Menu = ({
           isFetching={isFetching}
         />
       )}
-      {filteredOptions.map((item, index) => {
-        if (item.group) {
+      {filteredOptions.map((item, arrayIndex) => {
+        if (item.options) {
           return (
-            <div className="pf-c-select__menu-group" key={`group-${index}`}>
-              <div className="pf-c-select__menu-group-title">{item.group}</div>
+            <div className="pf-c-select__menu-group" key={`group-${arrayIndex}`}>
+              <div className="pf-c-select__menu-group-title">{item.label}</div>
+              {item.options.map((nestedItem) => createOption(nestedItem))}
             </div>
           );
         }
@@ -143,14 +162,7 @@ const Menu = ({
           return <hr className="pf-c-divider" key={`divider-${index}`} />;
         }
 
-        const itemProps = getItemProps({
-          item,
-          index,
-          isActive: highlightedIndex === index,
-          isSelected: isMulti ? !!selectedItem.find(({ value }) => item.value === value) : selectedItem === item.value,
-          onMouseUp: (e) => e.stopPropagation(), // we need this to prevent issues with portal menu not selecting a option
-        });
-        return <Option key={item.key || item.value || (typeof item.label === 'string' && item.label) || item} item={item} {...itemProps} />;
+        return createOption(item);
       })}
     </ul>
   );

packages/pf4-component-mapper/src/select/select/select.js

@@ -69,11 +69,36 @@ const itemToString = (value, isMulti, showMore, handleShowMore, handleChange) =>
 };
 
 // TODO fix the value of internal select not to be an array all the time. It forces the filter value to be an array and it crashes sometimes.
-const filterOptions = (options, filterValue = '') =>
-  options.filter(({ label }) => {
-    const filter = Array.isArray(filterValue) && filterValue.length > 0 ? filterValue[0] : filterValue;
-    return label.toLowerCase().includes(filter.toLowerCase());
-  });
+const filterOptions = (options, filterValue = '') => {
+  const filter = (Array.isArray(filterValue) && filterValue.length > 0 ? filterValue[0] : filterValue).toLowerCase();
+
+  if (!filter) {
+    return options;
+  }
+
+  return options
+    .map((option) => {
+      if (option.options) {
+        const filteredNested = option.options.map((option) => (option.label?.toLowerCase().includes(filter) ? option : null)).filter(Boolean);
+
+        if (filteredNested.length === 0) {
+          return null;
+        }
+
+        return {
+          ...option,
+          options: filteredNested,
+        };
+      }
+
+      if (option.label?.toLowerCase().includes(filter)) {
+        return option;
+      }
+
+      return null;
+    })
+    .filter(Boolean);
+};
 
 const getValue = (isMulti, option, value) => {
   if (!isMulti || !option) {
@@ -154,6 +179,7 @@ const InternalSelect = ({
   loadingMessage,
   menuPortalTarget,
   menuIsPortal,
+  originalOptions,
   ...props
 }) => {
   const [showMore, setShowMore] = useState(false);
@@ -223,6 +249,7 @@ const InternalSelect = ({
                 menuPortalTarget={menuPortalTarget}
                 menuIsPortal={menuIsPortal}
                 selectToggleRef={selectToggleRef}
+                originalOptions={originalOptions}
               />
             )}
           </div>
@@ -257,6 +284,7 @@ InternalSelect.propTypes = {
   loadingMessage: PropTypes.node,
   menuPortalTarget: PropTypes.any,
   menuIsPortal: PropTypes.bool,
+  originalOptions: PropTypes.array,
 };
 
 const Select = ({ menuIsPortal, ...props }) => {