diff --git a/graylog2-web-interface/src/views/components/searchbar/RefreshControls.test.tsx b/graylog2-web-interface/src/views/components/searchbar/RefreshControls.test.tsx
index 0a4cc7fbe00e0..b58e7a8c1cf13 100644
--- a/graylog2-web-interface/src/views/components/searchbar/RefreshControls.test.tsx
+++ b/graylog2-web-interface/src/views/components/searchbar/RefreshControls.test.tsx
@@ -66,6 +66,16 @@ describe('RefreshControls', () => {
children: undefined,
};
+ const TriggerFormChangeButton = () => {
+ const { setFieldValue } = useFormikContext();
+
+ return (
+
+ );
+ };
+
beforeEach(() => {
asMock(useSearchConfiguration).mockReturnValue({
config: {
@@ -118,16 +128,6 @@ describe('RefreshControls', () => {
asMock(useRefreshConfig).mockReturnValue({ enabled: false, interval: 5000 });
const onSubmitMock = jest.fn();
- const TriggerFormChangeButton = () => {
- const { setFieldValue } = useFormikContext();
-
- return (
-
- );
- };
-
render(
@@ -139,4 +139,18 @@ describe('RefreshControls', () => {
await waitFor(() => expect(onSubmitMock).toHaveBeenCalled());
});
+
+ it('should stop the interval when there are form changes while the interval is active', async () => {
+ asMock(useRefreshConfig).mockReturnValue({ enabled: true, interval: 5000 });
+
+ render(
+
+
+ ,
+ );
+
+ userEvent.click(await screen.findByRole('button', { name: /change form field value/i }));
+
+ await waitFor(() => expect(RefreshActions.disable).toHaveBeenCalled());
+ });
});
diff --git a/graylog2-web-interface/src/views/components/searchbar/RefreshControls.tsx b/graylog2-web-interface/src/views/components/searchbar/RefreshControls.tsx
index 5eae4cc8473df..d8b52df6b0035 100644
--- a/graylog2-web-interface/src/views/components/searchbar/RefreshControls.tsx
+++ b/graylog2-web-interface/src/views/components/searchbar/RefreshControls.tsx
@@ -51,6 +51,17 @@ const ButtonLabel = ({ refreshConfigEnabled, naturalInterval }: {
return <>{buttonText}>;
};
+const useDisableOnFormChange = () => {
+ const refreshConfig = useRefreshConfig();
+ const { dirty, isSubmitting } = useFormikContext();
+
+ useEffect(() => {
+ if (refreshConfig.enabled && !isSubmitting && dirty) {
+ RefreshActions.disable();
+ }
+ }, [dirty, isSubmitting, refreshConfig.enabled]);
+};
+
const durationToMS = (duration: string) => moment.duration(duration).asMilliseconds();
const RefreshControls = () => {
@@ -69,9 +80,14 @@ const RefreshControls = () => {
});
RefreshActions.setInterval(interval);
+
+ if (dirty) {
+ submitForm();
+ }
};
useEffect(() => () => RefreshActions.disable(), []);
+ useDisableOnFormChange();
const _toggleEnable = useCallback(() => {
sendTelemetry(TELEMETRY_EVENT_TYPE.SEARCH_REFRESH_CONTROL_TOGGLED, {