[select] fix: do not call itemRenderer when Select is disabled

packages/select/src/components/query-list/queryList.tsx

@@ -49,6 +49,12 @@ export interface IQueryListProps<T> extends IListItemsProps<T> {
      * Receives an object with props that should be applied to elements as necessary.
      */
     renderer: (listProps: IQueryListRendererProps<T>) => JSX.Element;
+
+    /**
+     * Whether the list is disabled.
+     * @default false
+     */
+    disabled?: boolean;
 }
 
 /**
@@ -127,6 +133,7 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
     public static displayName = `${DISPLAYNAME_PREFIX}.QueryList`;
 
     public static defaultProps = {
+        disabled: false,
         resetOnQuery: true,
     };
 
@@ -304,19 +311,23 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
 
     /** wrapper around `itemRenderer` to inject props */
     private renderItem = (item: T, index: number) => {
-        const { activeItem, query } = this.state;
-        const matchesPredicate = this.state.filteredItems.indexOf(item) >= 0;
-        const modifiers: IItemModifiers = {
-            active: executeItemsEqual(this.props.itemsEqual, getActiveItem(activeItem), item),
-            disabled: isItemDisabled(item, index, this.props.itemDisabled),
-            matchesPredicate,
-        };
-        return this.props.itemRenderer(item, {
-            handleClick: e => this.handleItemSelect(item, e),
-            index,
-            modifiers,
-            query,
-        });
+        if (this.props.disabled !== true) {
+            const { activeItem, query } = this.state;
+            const matchesPredicate = this.state.filteredItems.indexOf(item) >= 0;
+            const modifiers: IItemModifiers = {
+                active: executeItemsEqual(this.props.itemsEqual, getActiveItem(activeItem), item),
+                disabled: isItemDisabled(item, index, this.props.itemDisabled),
+                matchesPredicate,
+            };
+            return this.props.itemRenderer(item, {
+                handleClick: e => this.handleItemSelect(item, e),
+                index,
+                modifiers,
+                query,
+            });
+        }
+
+        return null;
     };
 
     private renderCreateItemMenuItem = (query: string) => {

packages/select/src/components/select/select.tsx

@@ -42,6 +42,7 @@ export interface ISelectProps<T> extends IListItemsProps<T> {
 
     /**
      * Whether the component is non-interactive.
+     * If true, the list's item renderer will not be called.
      * Note that you'll also need to disable the component's children, if appropriate.
      * @default false
      */

packages/select/test/selectTests.tsx

@@ -66,6 +66,16 @@ describe("<Select>", () => {
         assert.strictEqual(wrapper.find(Popover).prop("disabled"), true);
     });
 
+    it("disabled=true doesn't call itemRenderer", () => {
+        select({ disabled: true });
+        assert.equal(handlers.itemRenderer.callCount, 0);
+    });
+
+    it("disabled=false calls itemRenderer", () => {
+        select({ disabled: false });
+        assert.equal(handlers.itemRenderer.callCount, 100);
+    });
+
     it("inputProps value and onChange are ignored", () => {
         const inputProps = { value: "nailed it", onChange: sinon.spy() };
         const input = select({ inputProps }).find("input");