use useMemo to render grouped options

mui · Oct 29, 2020 · 8679214 · 8679214
1 parent 81bd070
commit 8679214
Showing 1 changed file with 18 additions and 2 deletions.
diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js
@@ -404,6 +404,21 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
  );
  };
 
+ const renderGroupedOptions = React.useMemo(() => (groupedOptions) => {
+ return groupedOptions.map((option, index) => {
+ if (groupBy) {
+ return renderGroup({
+ key: option.key,
+ group: option.group,
+ children: option.options.map((option2, index2) =>
+ renderListOption(option2, option.index + index2),
+ ),
+ });
+ }
+ return renderListOption(option, index);
+ })
+ }, [groupedOptions]);
+
  const hasClearIcon = !disableClearable && !disabled && dirty;
  const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
 
@@ -496,7 +511,8 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
  {...getListboxProps()}
  {...ListboxProps}
  >
- {groupedOptions.map((option, index) => {
+ {renderGroupedOptions(groupedOptions)}
+ {/* {groupedOptions.map((option, index) => {
  if (groupBy) {
  return renderGroup({
  key: option.key,
@@ -507,7 +523,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
  });
  }
  return renderListOption(option, index);
- })}
+ })} */}
  </ListboxComponent>
  ) : null}
  </PaperComponent>