diff --git a/frontend/awx/views/schedules/components/RulesList.tsx b/frontend/awx/views/schedules/components/RulesList.tsx
index d0c4f32228..39ba85b67f 100644
--- a/frontend/awx/views/schedules/components/RulesList.tsx
+++ b/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 = (
-
+
{local.map((dateTimeString) => (
))}
-
+
);
}
});
diff --git a/frontend/common/label-group-wrapper.tsx b/frontend/common/label-group-wrapper.tsx
new file mode 100644
index 0000000000..e37c54af8e
--- /dev/null
+++ b/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) => void' is not assignable to type '() => void'.
+ toggleCollapse = (event: React.MouseEvent) => {
+ // 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),
+ };
+ });
+ };
+}