Fix update loop in Group Sub Groups panel (#6212)

* Fix location equality testing causing update loop
* Move defaultFilter out of component
* Fix add sub groups dialog dropdown render issue

ui/v2.5/src/components/Groups/GroupDetails/AddGroupsDialog.tsx

@@ -114,6 +114,7 @@ export const AddSubGroupsDialog: React.FC<IListOperationProps> = (
           onUpdate={(input) => setEntries(input)}
           excludeIDs={excludeIDs}
           filterHook={filterHook}
+          menuPortalTarget={document.body}
         />
       </Form>
     </ModalComponent>

ui/v2.5/src/components/Groups/GroupDetails/GroupSubGroupsPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { GroupList } from "../GroupList";
 import { ListFilterModel } from "src/models/list-filter/filter";
@@ -101,6 +101,18 @@ interface IGroupSubGroupsPanel {
   group: GQL.GroupDataFragment;
 }
 
+const defaultFilter = (() => {
+  const sortBy = "sub_group_order";
+  const ret = new ListFilterModel(GQL.FilterMode.Groups, undefined, {
+    defaultSortBy: sortBy,
+  });
+
+  // unset the sort by so that its not included in the URL
+  ret.sortBy = undefined;
+
+  return ret;
+})();
+
 export const GroupSubGroupsPanel: React.FC<IGroupSubGroupsPanel> = ({
   active,
   group,
@@ -114,18 +126,6 @@ export const GroupSubGroupsPanel: React.FC<IGroupSubGroupsPanel> = ({
 
   const filterHook = useContainingGroupFilterHook(group);
 
-  const defaultFilter = useMemo(() => {
-    const sortBy = "sub_group_order";
-    const ret = new ListFilterModel(GQL.FilterMode.Groups, undefined, {
-      defaultSortBy: sortBy,
-    });
-
-    // unset the sort by so that its not included in the URL
-    ret.sortBy = undefined;
-
-    return ret;
-  }, []);
-
   async function removeSubGroups(
     result: GQL.FindGroupsQueryResult,
     filter: ListFilterModel,

ui/v2.5/src/components/List/util.ts

@@ -12,6 +12,13 @@ import * as GQL from "src/core/generated-graphql";
 import { DisplayMode } from "src/models/list-filter/types";
 import { Criterion } from "src/models/list-filter/criteria/criterion";
 
+function locationEquals(
+  loc1: ReturnType<typeof useLocation> | undefined,
+  loc2: ReturnType<typeof useLocation>
+) {
+  return loc1 && loc1.pathname === loc2.pathname && loc1.search === loc2.search;
+}
+
 export function useFilterURL(
   filter: ListFilterModel,
   setFilter: React.Dispatch<React.SetStateAction<ListFilterModel>>,
@@ -49,7 +56,7 @@ export function useFilterURL(
   useEffect(() => {
     // don't apply if active is false
     // also don't apply if location is unchanged
-    if (!active || prevLocation === location) return;
+    if (!active || locationEquals(prevLocation, location)) return;
 
     // re-init to load default filter on empty new query params
     if (!location.search) {