Variables: hides dropdown before refreshing starts (#28112)

public/app/features/variables/pickers/OptionsPicker/actions.test.ts

@@ -192,9 +192,9 @@ describe('options picker actions', () => {
         toggleOption({ option: options[1], forceSelect: true, clearOthers }),
         toggleOption({ option: options[1], forceSelect: true, clearOthers }),
         setCurrentVariableValue(toVariablePayload(variable, { option })),
         setCurrentVariableValue(toVariablePayload(variable, { option })),
         changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: '' })),
         changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: '' })),
+        hideOptions(),
         setCurrentVariableValue(toVariablePayload(variable, { option })),
         setCurrentVariableValue(toVariablePayload(variable, { option })),
-        updateLocation({ query: { 'var-Constant': ['B'] } }),
-        hideOptions()
+        updateLocation({ query: { 'var-Constant': ['B'] } })
       );
       );
     });
     });
   });
   });
@@ -265,9 +265,9 @@ describe('options picker actions', () => {
       tester.thenDispatchedActionsShouldEqual(
       tester.thenDispatchedActionsShouldEqual(
         setCurrentVariableValue(toVariablePayload(variable, { option })),
         setCurrentVariableValue(toVariablePayload(variable, { option })),
         changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: '' })),
         changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: '' })),
+        hideOptions(),
         setCurrentVariableValue(toVariablePayload(variable, { option })),
         setCurrentVariableValue(toVariablePayload(variable, { option })),
-        updateLocation({ query: { 'var-Constant': [] } }),
-        hideOptions()
+        updateLocation({ query: { 'var-Constant': [] } })
       );
       );
     });
     });
   });
   });
@@ -297,9 +297,9 @@ describe('options picker actions', () => {
       tester.thenDispatchedActionsShouldEqual(
       tester.thenDispatchedActionsShouldEqual(
         setCurrentVariableValue(toVariablePayload(variable, { option })),
         setCurrentVariableValue(toVariablePayload(variable, { option })),
         changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: 'C' })),
         changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: 'C' })),
+        hideOptions(),
         setCurrentVariableValue(toVariablePayload(variable, { option })),
         setCurrentVariableValue(toVariablePayload(variable, { option })),
-        updateLocation({ query: { 'var-Constant': [] } }),
-        hideOptions()
+        updateLocation({ query: { 'var-Constant': [] } })
       );
       );
     });
     });
   });
   });

public/app/features/variables/pickers/OptionsPicker/actions.ts

@@ -82,14 +82,15 @@ export const commitChangesToVariable = (): ThunkResult<void> => {
     dispatch(setCurrentVariableValue(toVariablePayload(existing, currentPayload)));
     dispatch(setCurrentVariableValue(toVariablePayload(existing, currentPayload)));
     dispatch(changeVariableProp(toVariablePayload(existing, searchQueryPayload)));
     dispatch(changeVariableProp(toVariablePayload(existing, searchQueryPayload)));
     const updated = getVariable<VariableWithMultiSupport>(picker.id, getState());
     const updated = getVariable<VariableWithMultiSupport>(picker.id, getState());
+    dispatch(hideOptions());
 
 
     if (getCurrentText(existing) === getCurrentText(updated)) {
     if (getCurrentText(existing) === getCurrentText(updated)) {
-      return dispatch(hideOptions());
+      return;
     }
     }
 
 
     const adapter = variableAdapters.get(updated.type);
     const adapter = variableAdapters.get(updated.type);
     await adapter.setValue(updated, updated.current, true);
     await adapter.setValue(updated, updated.current, true);
-    return dispatch(hideOptions());
+    return;
   };
   };
 };
 };