A bit more cleanup.

packages/documentsearch-extension/src/index.ts

@@ -15,7 +15,6 @@ import { ICommandPalette } from '@jupyterlab/apputils';
 import { IMainMenu } from '@jupyterlab/mainmenu';
 
 import { ISignal } from '@phosphor/signaling';
-import { Widget } from '@phosphor/widgets';
 
 export interface ISearchMatch {
   /**
@@ -201,7 +200,6 @@ const extension: JupyterFrontEndPlugin<void> = {
             return;
           }
           searchInstance = new SearchInstance(currentWidget, searchProvider);
-          Widget.attach(searchInstance.searchWidget, currentWidget.node);
 
           activeSearches[widgetId] = searchInstance;
           // find next and previous are now enabled

packages/documentsearch-extension/src/searchinstance.ts

@@ -18,16 +18,16 @@ export class SearchInstance implements IDisposable {
     this._widget = widget;
     this._activeProvider = searchProvider;
 
-    this._searchWidget = createSearchOverlay(
-      this._displayUpdateSignal,
-      this._displayState,
-      this._onCaseSensitiveToggled.bind(this),
-      this._onRegexToggled.bind(this),
-      this._highlightNext.bind(this),
-      this._highlightPrevious.bind(this),
-      this._startQuery.bind(this),
-      this.dispose.bind(this)
-    );
+    this._searchWidget = createSearchOverlay({
+      widgetChanged: this._displayUpdateSignal,
+      overlayState: this._displayState,
+      onCaseSensitiveToggled: this._onCaseSensitiveToggled.bind(this),
+      onRegexToggled: this._onRegexToggled.bind(this),
+      onHightlightNext: this._highlightNext.bind(this),
+      onHighlightPrevious: this._highlightPrevious.bind(this),
+      onStartQuery: this._startQuery.bind(this),
+      onEndSearch: this.dispose.bind(this)
+    });
 
     this._widget.disposed.connect(() => {
       this.dispose();
@@ -43,6 +43,7 @@ export class SearchInstance implements IDisposable {
         this._widget.toolbar.node.clientHeight
       }px`;
     }
+    this._displaySearchWidget();
   }
 
   /**
@@ -123,19 +124,28 @@ export class SearchInstance implements IDisposable {
   }
 
   /**
-   * Test whether the tracker is disposed.
+   * Test if the object has been disposed.
    */
   get isDisposed(): boolean {
     return this._isDisposed;
   }
 
   /**
-   * A signal emitted when the context is disposed.
+   * A signal emitted when the object is disposed.
    */
   get disposed(): ISignal<this, void> {
     return this._disposed;
   }
 
+  /**
+   * Display search widget.
+   */
+  _displaySearchWidget() {
+    if (!this._searchWidget.isAttached) {
+      Widget.attach(this._searchWidget, this._widget.node);
+    }
+  }
+
   private async _highlightNext() {
     if (!this._displayState.query) {
       return;
@@ -152,15 +162,15 @@ export class SearchInstance implements IDisposable {
     this.updateIndices();
   }
 
-  private _onCaseSensitiveToggled = () => {
+  private _onCaseSensitiveToggled() {
     this._displayState.caseSensitive = !this._displayState.caseSensitive;
     this._updateDisplay();
-  };
+  }
 
-  private _onRegexToggled = () => {
+  private _onRegexToggled() {
     this._displayState.useRegex = !this._displayState.useRegex;
     this._updateDisplay();
-  };
+  }
 
   private _widget: Widget;
   private _displayState: IDisplayState = {

packages/documentsearch-extension/src/searchoverlay.tsx

@@ -230,15 +230,18 @@ class SearchOverlay extends React.Component<
 }
 
 export function createSearchOverlay(
-  widgetChanged: Signal<SearchInstance, IDisplayState>,
-  overlayState: IDisplayState,
-  onCaseSensitiveToggled: Function,
-  onRegexToggled: Function,
-  onHightlightNext: Function,
-  onHighlightPrevious: Function,
-  onStartQuery: Function,
-  onEndSearch: Function
+  options: createSearchOverlay.IOptions
 ): Widget {
+  const {
+    widgetChanged,
+    overlayState,
+    onCaseSensitiveToggled,
+    onRegexToggled,
+    onHightlightNext,
+    onHighlightPrevious,
+    onStartQuery,
+    onEndSearch
+  } = options;
   const widget = ReactWidget.create(
     <UseSignal signal={widgetChanged} initialArgs={overlayState}>
       {(_, args) => {
@@ -260,6 +263,19 @@ export function createSearchOverlay(
   return widget;
 }
 
+namespace createSearchOverlay {
+  export interface IOptions {
+    widgetChanged: Signal<SearchInstance, IDisplayState>;
+    overlayState: IDisplayState;
+    onCaseSensitiveToggled: Function;
+    onRegexToggled: Function;
+    onHightlightNext: Function;
+    onHighlightPrevious: Function;
+    onStartQuery: Function;
+    onEndSearch: Function;
+  }
+}
+
 namespace Private {
   export function parseQuery(
     queryString: string,