From 9c6de734be0fcc3cc456ee06f9aa8a8b358a8cf2 Mon Sep 17 00:00:00 2001
From: Kevin Simons <ksimons@palantir.com>
Date: Tue, 20 Jun 2017 12:59:29 -0700
Subject: [PATCH] Do not propagate event if correctly handling empty list

---
 packages/labs/src/query-list/queryList.tsx |  4 +++-
 packages/labs/test/queryListTests.tsx      | 22 +++++++++++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/labs/src/query-list/queryList.tsx b/packages/labs/src/query-list/queryList.tsx
index ed6c35bdc2..b271e1d9a2 100644
--- a/packages/labs/src/query-list/queryList.tsx
+++ b/packages/labs/src/query-list/queryList.tsx
@@ -186,7 +186,9 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
             this.shouldCheckActiveItemInViewport = false;
         }
         // reset active item (in the same step) if it's no longer valid
-        if (this.getActiveIndex() < 0) {
+        // Also don't fire the event if the active item is already undefined and there is nothing to pick
+        if (this.getActiveIndex() < 0 &&
+            (this.state.filteredItems.length !== 0 || this.props.activeItem !== undefined)) {
             Utils.safeInvoke(this.props.onActiveItemChange, this.state.filteredItems[0]);
         }
     }
diff --git a/packages/labs/test/queryListTests.tsx b/packages/labs/test/queryListTests.tsx
index ffbf7730df..166a3b6e78 100644
--- a/packages/labs/test/queryListTests.tsx
+++ b/packages/labs/test/queryListTests.tsx
@@ -6,7 +6,7 @@
  */
 
 import { assert } from "chai";
-import { shallow } from "enzyme";
+import { mount, shallow } from "enzyme";
 import * as React from "react";
 
 import { Film, TOP_100_FILMS } from "../examples/data";
@@ -63,6 +63,26 @@ describe("<QueryList>", () => {
             assert.isTrue(listPredicate.called, "listPredicate should be invoked");
             assert.isFalse(predicate.called, "item predicate should not be invoked");
         });
+
+        it("ensure onActiveItemChange is not called with undefined and empty list", () => {
+            const myItem = { title: "Toy Story 3", year: 2010, rank: 1 };
+            const listPredicate = (query: string, films: Film[]) => {
+                return films.filter((film) => film.title === query);
+            };
+            const onActiveItemChange = sinon.spy(() => {return; });
+            const filmQueryList = mount(<FilmQueryList
+                {...props}
+                items={[myItem]}
+                activeItem={myItem}
+                onActiveItemChange={onActiveItemChange}
+                itemListPredicate={listPredicate}
+                query=""
+            />);
+            filmQueryList.setProps({query: "FAKE_QUERY"});
+            filmQueryList.setProps({activeItem: undefined});
+            assert.isTrue(onActiveItemChange.returned(undefined));
+            assert.equal(onActiveItemChange.callCount, 1);
+        });
     });
 
     describe("keyboard", () => {