diff --git a/packages/scenes/src/variables/variants/ScopesVariable.test.tsx b/packages/scenes/src/variables/variants/ScopesVariable.test.tsx index 6cc17f0cb..3c908fac5 100644 --- a/packages/scenes/src/variables/variants/ScopesVariable.test.tsx +++ b/packages/scenes/src/variables/variants/ScopesVariable.test.tsx @@ -74,6 +74,15 @@ describe('ScopesVariable', () => { const { valueChangedCount } = renderTestScene({ initialScopes: [] }); expect(valueChangedCount.value).toEqual(1); }); + + it('should not emit a change event if the old and new scopes are empty', async () => { + const { scopesContext, valueChangedCount } = renderTestScene({ initialScopes: [] }); + + act(() => scopesContext.changeScopes([])); + act(() => scopesContext.changeScopes([])); + + expect(valueChangedCount.value).toEqual(1); + }); }); interface SetupOptions { diff --git a/packages/scenes/src/variables/variants/ScopesVariable.tsx b/packages/scenes/src/variables/variants/ScopesVariable.tsx index d97d1625e..33273c265 100644 --- a/packages/scenes/src/variables/variants/ScopesVariable.tsx +++ b/packages/scenes/src/variables/variants/ScopesVariable.tsx @@ -30,6 +30,8 @@ export interface ScopesVariableState extends SceneVariableState { export class ScopesVariable extends SceneObjectBase implements SceneVariable { protected _renderBeforeActivation = true; protected _context: ScopesContextValue | undefined; + // Used to always emit an update event on initial load + private _isInitialUpdate = true; // Special options that enables variables to be hidden but still render to access react contexts public UNSAFE_renderAsHidden = true; @@ -100,11 +102,13 @@ export class ScopesVariable extends SceneObjectBase impleme const scopesHaveChanged = !isEqual(oldScopes, newScopes); // Only update scopes value state when loading is false and the scopes have changed - if (!loading && (scopesHaveChanged || newScopes.length === 0)) { + // Emit on initial load to ensure that the variable is updated when the scopes are empty + if (!loading && (scopesHaveChanged || this._isInitialUpdate)) { const queryController = getQueryController(this); queryController?.startProfile(SCOPES_CHANGED_INTERACTION); this.setState({ scopes: state.value, loading }); this.publishEvent(new SceneVariableValueChangedEvent(this), true); + this._isInitialUpdate = false; } else { this.setState({ loading }); }