feat(dropdownlist): add change event

examples/dropdownlist.jsx

@@ -24,8 +24,8 @@ class DropDownContainer extends React.Component {
         this.state = {
             data: data,
             value: 1,
-            filterable: true,
             onFilter: this.onFilter,
+            onChange: this.onChange,
             defaultItem: { text: "select...", value: null },
             textField: "text",
             valueField: "value"
@@ -49,6 +49,10 @@ class DropDownContainer extends React.Component {
         this.setState({ data: result });
     }
 
+    onChange = (dataItem) => {
+        console.log(dataItem);
+    }
+
     itemRenderer = (dataItem) => `renderer: ${dataItem.text}`
 
     render() {

src/DropDownList.jsx

@@ -189,47 +189,37 @@ export default class DropDownList extends React.Component {
         }
 
         if (index !== dataLength) {
-            //oldFocusedItem = this._focus();
-
             if (defaultItem && util.getter(data[index], valueField) === util.getter(defaultItem, valueField)) {
                 this.selectByIndex(-1);
             } else {
                 this.selectByIndex(util.normalizeIndex(startIndex + index, dataLength));
             }
-
-            /* TODO: cancel-able event
-            if (that.trigger("select", { item: that._focus() })) {
-                that._select(oldFocusedItem);
-            }
-            */
-
-            /* TODO: change event?
-            if (!that.popup.visible()) {
-                that._change();
-            }
-            */
         }
     }
 
     selectByIndex(index) {
         if (index === -1) {
-            this.setState({
-                dataItem: this.props.defaultItem,
-                selected: index,
-                focused: index
-            });
+            this.select(this.props.defaultItem);
         } else {
             this.select(this.props.data[this.props.defaultItem ? index - 1 : index]);
         }
     }
 
     select = (dataItem) => {
+        const { onChange, valueField } = this.props;
+
         if (!this.props.disabled) {
             this.setState({
                 dataItem: dataItem,
                 selected: this.props.data.indexOf(dataItem),
                 focused: this.props.data.indexOf(dataItem)
             });
+
+            //if popup is visible
+            if (onChange && this.previous !== util.getter(dataItem, valueField)) {
+                this.props.onChange(dataItem);
+                this.previous = util.getter(dataItem, valueField);
+            }
         }
     };
 
@@ -275,11 +265,7 @@ export default class DropDownList extends React.Component {
         }
 
         if (handled) {
-            this.setState({
-                dataItem: dataItem || data[focused],
-                focused: focused,
-                selected: focused
-            });
+            this.select(dataItem || (data[focused] || defaultItem));
         }
     };
 

test/DropDownList.jsx

@@ -7,6 +7,7 @@ import { keyPress } from './Helpers';
 import List from '../src/List';
 import ListItem from '../src/ListItem';
 import ListFilter from '../src/ListFilter';
+import ListDefaultItem from '../src/ListDefaultItem';
 import DropDownList from '../src/DropDownList';
 
 const DropDownListStub = class extends DropDownList {
@@ -507,8 +508,6 @@ describe('DropDownList search', () => {
         expect(result.state('selected')).toEqual(1);
     });
 
-    //it('should trigger change when searching') line 184
-
     it('should honor ignoreCase option', () => {
         const primitives = [ "text1", "Text2", "Text3" ];
 
@@ -717,3 +716,97 @@ describe('DropDownList filter', () => {
     //should update popup height when no items are found
 
 });
+
+describe('DropDownList change event', () => {
+    const primitives = [ "foo", "bar", "baz" ];
+    const data = [
+        { text: "foo", value: 1 },
+        { text: "bar", value: 2 },
+        { text: "baz", value: 3 }
+    ];
+
+    let result;
+
+    it('should not fire change event on load when value is selected by index', () => {
+        const spy = jasmine.createSpy('spy');
+
+        result = shallow(<DropDownListStub data={primitives} index={2} onChange={spy} />);
+        expect(spy).not.toHaveBeenCalled();
+    });
+
+    it('should not fire change event on load when value is selected by value', () => {
+        const spy = jasmine.createSpy('spy');
+
+        result = shallow(<DropDownListStub data={primitives} onChange={spy} value="baz" />);
+        expect(spy).not.toHaveBeenCalled();
+    });
+
+    it('should trigger change when item is clicked', () => {
+        const spy = jasmine.createSpy('spy');
+
+        result = shallow(<DropDownListStub data={primitives} onChange={spy} />);
+        const items = result.find(List).shallow().find(ListItem);
+
+        items.at(1).shallow().simulate('click');
+        expect(spy).toHaveBeenCalledWith("bar");
+    });
+
+    it('should trigger change when default item is clicked', () => {
+        const spy = jasmine.createSpy('spy');
+
+        result = shallow(
+            <DropDownListStub
+                data={data}
+                defaultItem={{ text: "select...", value: null }}
+                onChange={spy}
+                textField="text"
+                valueField="value"
+            />
+        );
+        const defaultItem = result.find(ListDefaultItem).shallow();
+
+        defaultItem.simulate('click');
+        expect(spy).toHaveBeenCalledWith({ text: "select...", value: null });
+    });
+
+    it('should trigger change when default item is clicked (primitives)', () => {
+        const spy = jasmine.createSpy('spy');
+
+        result = shallow(<DropDownListStub data={primitives} defaultItem="select..." onChange={spy} />);
+        const defaultItem = result.find(ListDefaultItem).shallow();
+
+        defaultItem.simulate('click');
+        expect(spy).toHaveBeenCalledWith(null);
+    });
+
+    it('should trigger change when searching', () => {
+        const spy = jasmine.createSpy('spy');
+
+        result = shallow(<DropDownListStub data={primitives} onChange={spy} />);
+
+        keyPress(result, "b");
+        expect(spy).toHaveBeenCalledWith("bar");
+        keyPress(result, "b");
+        expect(spy).toHaveBeenCalledWith("baz");
+    });
+
+    it('should trigger change when searching default item', () => {
+        const spy = jasmine.createSpy('spy');
+
+        result = shallow(<DropDownListStub data={primitives} defaultItem="select..." onChange={spy} />);
+
+        keyPress(result, "s");
+        expect(spy).toHaveBeenCalledWith("select...");
+    });
+
+    it('should NOT trigger change when searching but value does not change', () => {
+        const spy = jasmine.createSpy('spy');
+
+        result = shallow(<DropDownListStub data={primitives} onChange={spy} />);
+
+        keyPress(result, "f");
+        keyPress(result, "f");
+        expect(spy.calls.count()).toEqual(1);
+    });
+
+});