simplify filter logic

Author: siriwatknp

packages/mui-joy/src/Autocomplete/Autocomplete.tsx

@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
 import { chainPropTypes, integerPropType } from '@mui/utils';
 import composeClasses from '@mui/base/composeClasses';
-import { useAutocomplete, AutocompleteGroupedOption } from '@mui/base/AutocompleteUnstyled';
+import {
+  useAutocomplete,
+  AutocompleteGroupedOption,
+  UseAutocompleteProps,
+} from '@mui/base/AutocompleteUnstyled';
 import PopperUnstyled, {
   PopperUnstyledProps,
   PopperUnstyledTypeMap,
@@ -190,6 +194,27 @@ const AutocompleteLimitTag = styled('span', {
   marginBlockStart: 'var(--_Input-paddingBlock)',
 });
 
+const excludeUseAutocompleteParams = <
+  T extends Partial<UseAutocompleteProps<any, undefined, undefined, undefined>>,
+>({
+  autoComplete,
+  autoHighlight,
+  autoSelect,
+  blurOnSelect,
+  clearOnBlur,
+  clearOnEscape,
+  defaultValue,
+  disableCloseOnSelect,
+  disabledItemsFocusable,
+  disableListWrap,
+  filterSelectedOptions,
+  handleHomeEndKeys,
+  includeInputInList,
+  openOnFocus,
+  selectOnFocus,
+  ...other
+}: T) => other as T;
+
 const Autocomplete = React.forwardRef(function Autocomplete(
   inProps,
   ref: React.ForwardedRef<HTMLDivElement>,
@@ -239,17 +264,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
     value: valueProp,
     ...otherProps
   } = props;
-  const other = {} as typeof otherProps;
-  (Object.keys(otherProps) as Array<keyof typeof otherProps>).forEach((k) => {
-    if (
-      !k.match(
-        // Do not spread these props to the root DOM
-        /^(autoComplete|autoHighlight|autoSelect|blurOnSelect|clearOnBlur|clearOnEscape|defaultValue|disableCloseOnSelect|disabledItemsFocusable|disableListWrap|filterSelectedOptions|handleHomeEndKeys|includeInputInList|openOnFocus|selectOnFocus)$/,
-      )
-    ) {
-      other[k] = otherProps[k];
-    }
-  });
+  const other = excludeUseAutocompleteParams(otherProps);
 
   const formControl = React.useContext(FormControlContext);
   const size = inProps.size ?? formControl?.size ?? sizeProp;

packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx

@@ -29,6 +29,19 @@ const useUtilityClasses = (ownerState: AutocompleteListboxOwnerState) => {
   return composeClasses(slots, getAutocompleteListboxUtilityClass, {});
 };
 
+const excludePopperProps = <T extends Record<string, any>>({
+  anchorEl,
+  direction,
+  disablePortal,
+  modifiers,
+  open,
+  placement,
+  popperOptions,
+  popperRef,
+  TransitionProps,
+  ...other
+}: T) => other;
+
 export const StyledAutocompleteListbox = styled(StyledList)<{
   ownerState: AutocompleteListboxOwnerState;
 }>(({ theme, ownerState }) => {
@@ -82,7 +95,7 @@ const AutocompleteListbox = React.forwardRef(function AutocompleteListbox(inProp
     color = 'neutral',
     variant = 'outlined',
     size = 'md',
-    ...other
+    ...otherProps
   } = props;
 
   const ownerState = {
@@ -96,24 +109,14 @@ const AutocompleteListbox = React.forwardRef(function AutocompleteListbox(inProp
     wrap: false,
   };
 
-  const filteredOther: typeof other = {};
-  // ignore props that might be injected by PopperUnstyled
-  (Object.keys(other) as Array<keyof typeof other>).forEach((k) => {
-    if (
-      !k.match(
-        /^(anchorEl|direction|disablePortal|modifiers|open|placement|popperOptions|popperRef|TransitionProps)$/,
-      )
-    ) {
-      filteredOther[k] = other[k];
-    }
-  });
+  const other = excludePopperProps(otherProps);
 
   const classes = useUtilityClasses(ownerState);
 
   const rootProps = useSlotProps({
     elementType: AutocompleteListbox,
     externalSlotProps: {},
-    externalForwardedProps: filteredOther,
+    externalForwardedProps: other,
     ownerState,
     additionalProps: {
       ref,