Wrapper over LabelGroup (#2777)

frontend/awx/views/schedules/components/RulesList.tsx

@@ -12,10 +12,11 @@ import { getDocsBaseUrl } from '../../../common/util/getDocsBaseUrl';
 import { useRuleRowActions } from '../hooks/useRuleRowActions';
 import { RuleListItemType } from '../types';
 import { PlusCircleIcon } from '@patternfly/react-icons';
-import { Label, LabelGroup } from '@patternfly/react-core';
+import { Label } from '@patternfly/react-core';
 import { formatDateString } from '../../../../../framework/utils/dateTimeHelpers';
 import { awxAPI } from '../../../common/api/awx-utils';
 import { postRequest } from '../../../../common/crud/Data';
+import { LabelGroupWrapper } from '../../../../common/label-group-wrapper';
 
 export function RulesList(props: {
   setIsOpen?: (isOpen: boolean | number) => void;
@@ -64,13 +65,13 @@ export function RulesList(props: {
           occurrences.map(({ id, local }) => {
             if (id === item.id) {
               labels = (
-                <LabelGroup numLabels={5}>
+                <LabelGroupWrapper numLabels={5}>
                   {local.map((dateTimeString) => (
                     <Label key={dateTimeString}>
                       {formatDateString(dateTimeString, item.rule.options.tzid as string)}
                     </Label>
                   ))}
-                </LabelGroup>
+                </LabelGroupWrapper>
               );
             }
           });

frontend/common/label-group-wrapper.tsx

@@ -0,0 +1,25 @@
+import { LabelGroup as PFLabelGroup } from '@patternfly/react-core';
+
+type LabelGroupWrapperState = {
+  headingRef: { current: { offsetWidth: number; scrollWidth: number } };
+};
+
+// fix button without type when rendering "show more" in forms
+export class LabelGroupWrapper extends PFLabelGroup {
+  // @ts-expect-error Type '(e: React.MouseEvent<HTMLButtonElement>) => void' is not assignable to type '() => void'.
+  toggleCollapse = (event: React.MouseEvent<HTMLButtonElement>) => {
+    // Label isOverflowLabel renders a button, but not button type=button, breaks forms
+    event.preventDefault();
+
+    // original LabelGroup toggleCollapse, as of @patternfly/react-core 5.2.0, w/ ts fix
+    this.setState((prevState) => {
+      const obj = this as unknown as LabelGroupWrapperState;
+      const currentRef = obj.headingRef.current;
+
+      return {
+        isOpen: !prevState.isOpen,
+        isTooltipVisible: Boolean(currentRef && currentRef.offsetWidth < currentRef.scrollWidth),
+      };
+    });
+  };
+}