fix: fix loss of field focus after each character for search field (#262

)

* fix: fix loss of field focus after each character for search field

* fix: update package-lock file

src/components/GradesView/SearchControls.jsx

@@ -18,27 +18,38 @@ import messages from './SearchControls.messages';
 export class SearchControls extends React.Component {
   constructor(props) {
     super(props);
-    this.onChange = this.onChange.bind(this);
+    this.onBlur = this.onBlur.bind(this);
     this.onClear = this.onClear.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
   }
 
   /** Changing the search value stores the key in Gradebook. Currently unused */
-  onChange(searchValue) {
-    this.props.setSearchValue(searchValue);
+  onBlur(e) {
+    const { value } = e.target;
+    if (this.props.searchValue !== value) {
+      this.props.setSearchValue(value);
+    }
   }
 
   onClear() {
     this.props.setSearchValue('');
     this.props.fetchGrades();
   }
 
+  onSubmit(value) {
+    if (this.props.searchValue !== value) {
+      this.props.setSearchValue(value);
+    }
+    this.props.fetchGrades();
+  }
+
   render() {
     return (
       <div>
         <SearchField
-          onSubmit={this.props.fetchGrades}
+          onSubmit={this.onSubmit}
           inputLabel={<FormattedMessage {...messages.label} />}
-          onChange={this.onChange}
+          onBlur={this.onBlur}
           onClear={this.onClear}
           value={this.props.searchValue}
         />

src/components/GradesView/SearchControls.test.jsx

@@ -52,18 +52,25 @@ describe('SearchControls', () => {
     describe('Snapshots', () => {
       test('basic snapshot', () => {
         const wrapper = searchControls();
-        wrapper.instance().onChange = jest.fn().mockName('onChange');
+        wrapper.instance().onBlur = jest.fn().mockName('onBlur');
         wrapper.instance().onClear = jest.fn().mockName('onClear');
+        wrapper.instance().onSubmit = jest.fn().mockName('onSubmit');
         expect(wrapper.instance().render()).toMatchSnapshot();
       });
     });
 
-    describe('onChange', () => {
+    describe('onBlur', () => {
       it('saves the changed search value to Gradebook state', () => {
         const wrapper = searchControls();
-        wrapper.instance().onChange('bob');
+        wrapper.instance().onBlur({ target: { value: 'bob' } });
         expect(props.setSearchValue).toHaveBeenCalledWith('bob');
       });
+
+      it('doesnt save the same as previous value to Gradebook state', () => {
+        const wrapper = searchControls({ searchValue: 'bob' });
+        wrapper.instance().onBlur({ target: { value: 'bob' } });
+        expect(props.setSearchValue).not.toHaveBeenCalled();
+      });
     });
 
     describe('onChange', () => {
@@ -75,6 +82,22 @@ describe('SearchControls', () => {
       });
     });
 
+    describe('onSubmit', () => {
+      it('saves the changed search value to Gradebook state and calls fetchGrades', () => {
+        const wrapper = searchControls();
+        wrapper.instance().onSubmit('bob');
+        expect(props.setSearchValue).toHaveBeenCalledWith('bob');
+        expect(props.fetchGrades).toHaveBeenCalled();
+      });
+
+      it('doesnt save the same as previous value to Gradebook state and calls fetchGrades', () => {
+        const wrapper = searchControls({ searchValue: 'bob' });
+        wrapper.instance().onSubmit('bob');
+        expect(props.setSearchValue).not.toHaveBeenCalled();
+        expect(props.fetchGrades).toHaveBeenCalled();
+      });
+    });
+
     describe('mapStateToProps', () => {
       const testState = { never: 'gonna', give: 'you up' };
       test('searchValue from app.searchValue', () => {

src/components/GradesView/__snapshots__/SearchControls.test.jsx.snap

@@ -10,9 +10,9 @@ exports[`SearchControls Component Snapshots basic snapshot 1`] = `
         id="gradebook.GradesView.search.label"
       />
     }
-    onChange={[MockFunction onChange]}
+    onBlur={[MockFunction onBlur]}
     onClear={[MockFunction onClear]}
-    onSubmit={[MockFunction fetchGrades]}
+    onSubmit={[MockFunction onSubmit]}
     value="alice"
   />
   <small