Fix search highlights removal on clearing input box

galata/test/jupyterlab/notebook-search.test.ts

@@ -177,6 +177,28 @@ test.describe('Notebook Search', () => {
     await page.waitForSelector('text=1/2');
   });
 
+  test('Clear search when box is empty', async ({ page }) => {
+    // Open search box
+    await page.keyboard.press('Control+f');
+
+    // Search for "test"
+    await page.keyboard.press('Control+f');
+    await page.fill('[placeholder="Find"]', 'test');
+
+    // Should find "test" matches
+    await page.locator('text=1/2').waitFor();
+    await expect(page.locator('[placeholder="Find"]')).toHaveValue('test');
+
+    // Remove the "test" query
+    for (let i = 0; i < 4; i++) {
+      await page.press('[placeholder="Find"]', 'Backspace');
+    }
+    await expect(page.locator('[placeholder="Find"]')).toHaveValue('');
+
+    // Should reset the search to a clean state
+    await page.locator('text=-/-').waitFor();
+  });
+
   test('Close with Escape', async ({ page }) => {
     // Open search box
     await page.keyboard.press('Control+f');

packages/documentsearch/src/searchmodel.ts

@@ -357,9 +357,12 @@ export class SearchDocumentModel
       if (query) {
         this._searchActive = true;
         await this.searchProvider.startQuery(query, this._filters);
-        // Emit state change as the index needs to be updated
-        this.stateChanged.emit();
+      } else {
+        this._searchActive = false;
+        await this.searchProvider.endQuery();
       }
+      // Emit state change as the index needs to be updated
+      this.stateChanged.emit();
     } catch (reason) {
       this._parsingError = reason.toString();
       this.stateChanged.emit();

packages/documentsearch/test/searchmodel.spec.ts

@@ -10,21 +10,30 @@ import { signalToPromise } from '@jupyterlab/testing';
 
 class LogSearchProvider extends GenericSearchProvider {
   private _queryReceived: PromiseDelegate<RegExp | null>;
+  private _queryEnded: PromiseDelegate<void>;
   private _initialQuery: string = 'unset';
 
   constructor(widget: Widget) {
     super(widget);
     this._queryReceived = new PromiseDelegate();
+    this._queryEnded = new PromiseDelegate();
   }
   get queryReceived(): Promise<RegExp | null> {
     return this._queryReceived.promise;
   }
+  get queryEnded(): Promise<void> {
+    return this._queryEnded.promise;
+  }
 
   async startQuery(query: RegExp | null, filters = {}): Promise<void> {
     this._queryReceived.resolve(query);
     this._queryReceived = new PromiseDelegate();
   }
 
+  async endQuery(): Promise<void> {
+    this._queryEnded.resolve();
+  }
+
   set initialQuery(query: string) {
     this._initialQuery = query;
   }
@@ -60,6 +69,16 @@ describe('documentsearch/searchmodel', () => {
         expect(query.test('test')).toEqual(false);
         query.lastIndex = 0;
       });
+      it('should end search when query is empty', async () => {
+        // Start a search
+        model.searchExpression = 'query';
+        expect(model.searchExpression).toEqual('query');
+        await provider.queryReceived;
+        // Empty the query
+        model.searchExpression = '';
+        await provider.queryEnded;
+        expect(model.searchExpression).toEqual('');
+      });
     });
 
     describe('#parsingError', () => {