Search submit button can get stuck in loading state, when changing e.g. search query fast, while the search is submitting.

[linuspahl]

Expected Behavior

The search button should not display the loading indicator, when the search is not loading.

Current Behavior

When you execute the search and change e.g. the search query very fast, it is possible that isSubmitting in the formik state stays true in some cases.

In the following examples, I pressed enter after removing "test":

https://github.com/Graylog2/graylog2-server/assets/46300478/ea59eb89-1232-4bc6-9d0e-b3f951e6343e

It looks like in this case the code after validateFormWithHighPriority().then https://github.com/jaredpalmer/formik/blob/main/packages/formik/src/Formik.tsx#L741 is not being executed and isSumitting is not set to true anymore, probably because it is being interrupted by the new validation. I am not sure yet why exactly it behaves like this.

Your Environment

• Graylog Version: 5.2 beta1, but it probably also occurs in previous versions

[dennisoelkers]

This is related to the debouncing of the query string validation method. With debouncing, when multiple calls are happening in a time span, only one of them wins. The way it is implemented for query string validation, is that a promise is returned which will either resolve or stay pending forever.

The problem happens when a validation triggered by a change is running "at the same time" as a validation triggered by a submit. If in this situation the debounced call triggered by the validation "wins", its promise will resolve and the promise of the validation triggered by the submit will stay pending forever, also leading to the formik submit attempt never ending.