Set state for options in Display. Fixed state/rendering error in SearchTools.

Author: kpinnipa

src/CodeSnippetDisplay.tsx

@@ -203,6 +203,7 @@ export class CodeSnippetDisplay extends React.Component<
     this.handleDragMove = this.handleDragMove.bind(this);
     this._evtMouseUp = this._evtMouseUp.bind(this);
     this.handleRenameSnippet = this.handleRenameSnippet.bind(this);
+    this.setSearchOptions = this.setSearchOptions.bind(this);
   }
 
   // Handle code snippet insert into a notebook or document
@@ -1620,6 +1621,12 @@ export class CodeSnippetDisplay extends React.Component<
     return body;
   }
 
+  setSearchOptions(selectedOptions: string[]): void {
+    this.setState({
+      searchOptions: selectedOptions
+    });
+  }
+
   render(): React.ReactElement {
     return (
       <div>

src/CodeSnippetSearchTools.tsx

@@ -24,6 +24,7 @@ interface ISearchSnippetState {
 
 interface ISearchSnippetProps {
   selectedSearchOptions: string[];
+  setSearchOptions: (options: string[]) => void;
 }
 
 class OptionsHandler extends Widget {
@@ -54,26 +55,35 @@ export class SearchMultiOption extends React.Component<
   }
 
   // duplicate code between this and parent clickhandler, potentially combine
-  // STATUS: state updates are a bit weird, when unchecked, adding to state. When checked removing.
+  // STATUS: state updates are a bit weird, when unchecked, adding to state. When checked removing. Delay in update.
   handleClick(selectedOption: string, selected: boolean): void {
     if (selected) {
       // select option
-      this.setState(state => ({
-        currSelected: [...state.currSelected, selectedOption]
-      }));
+      this.setState(
+        state => ({
+          currSelected: [...state.currSelected, selectedOption]
+        }),
+        () => {
+          //callback
+          this.props.handleOptionClick(this.state.currSelected);
+        }
+      );
     } else {
       // unselect option
       const array = [...this.state.currSelected];
       const index = array.indexOf(selectedOption);
       if (index !== -1) {
         array.splice(index, 1);
-        this.setState({
-          currSelected: array
-        });
+        this.setState(
+          {
+            currSelected: array
+          },
+          () => {
+            this.props.handleOptionClick(this.state.currSelected);
+          }
+        );
       }
     }
-    this.props.handleOptionClick(this.state.currSelected);
-    console.log(this.state);
   }
 
   render(): JSX.Element {
@@ -150,6 +160,7 @@ export class SearchTools extends React.Component<
     this.setState({
       currSelected: selectedOptions
     });
+    this.props.setSearchOptions(selectedOptions);
   }
 
   handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void {