fix(voiceSearch): fix incorrect status on stop (#2535)

packages/react-instantsearch-dom/src/components/VoiceSearch.tsx

@@ -5,13 +5,12 @@ import createVoiceSearchHelper, {
   VoiceSearchHelper,
   VoiceListeningState,
   Status,
-  ErrorCode,
 } from '../lib/voiceSearchHelper';
 const cx = createClassNames('VoiceSearch');
 
 type InnerComponentProps = {
   status: Status;
-  errorCode?: ErrorCode;
+  errorCode?: SpeechRecognitionErrorCode;
   isListening: boolean;
   transcript: string;
   isSpeechFinal: boolean;

packages/react-instantsearch-dom/src/lib/voiceSearchHelper/__tests__/index.ts

@@ -1,4 +1,4 @@
-// copied from https://github.com/algolia/instantsearch.js/blob/0e988cc85487f61aa3b61131c22bed135ddfd76d/src/lib/voiceSearchHelper/__tests__/index-test.ts
+// copied from https://github.com/algolia/instantsearch.js/blob/688e36a67bb4c63d008d8abc02257a7b7c04e513/src/lib/voiceSearchHelper/__tests__/index-test.ts
 
 import createVoiceSearchHelper from '..';
 
@@ -193,4 +193,19 @@ describe('VoiceSearchHelper', () => {
     voiceSearchHelper.dispose();
     expect(stop).toHaveBeenCalledTimes(1);
   });
+
+  it('stops and the status becomes `finished`', () => {
+    window.SpeechRecognition = createFakeSpeechRecognition();
+    const onQueryChange = (): void => {};
+    const onStateChange = (): void => {};
+    const voiceSearchHelper = createVoiceSearchHelper({
+      searchAsYouSpeak: true,
+      onQueryChange,
+      onStateChange,
+    });
+
+    voiceSearchHelper.toggleListening();
+    voiceSearchHelper.toggleListening();
+    expect(voiceSearchHelper.getState().status).toBe('finished');
+  });
 });

packages/react-instantsearch-dom/src/lib/voiceSearchHelper/index.ts

@@ -1,4 +1,4 @@
-// copied from https://github.com/algolia/instantsearch.js/blob/0e988cc85487f61aa3b61131c22bed135ddfd76d/src/lib/voiceSearchHelper/index.ts
+// copied from https://github.com/algolia/instantsearch.js/blob/688e36a67bb4c63d008d8abc02257a7b7c04e513/src/lib/voiceSearchHelper/index.ts
 
 export type VoiceSearchHelperParams = {
   searchAsYouSpeak: boolean;
@@ -14,21 +14,11 @@ export type Status =
   | 'finished'
   | 'error';
 
-export type ErrorCode =
-  | 'no-speech'
-  | 'aborted'
-  | 'audio-capture'
-  | 'network'
-  | 'not-allowed'
-  | 'service-not-allowed'
-  | 'bad-grammar'
-  | 'language-not-supported';
-
 export type VoiceListeningState = {
   status: Status;
   transcript: string;
   isSpeechFinal: boolean;
-  errorCode?: ErrorCode;
+  errorCode?: SpeechRecognitionErrorCode;
 };
 
 export type VoiceSearchHelper = {
@@ -110,11 +100,6 @@ export default function createVoiceSearchHelper({
     }
   };
 
-  const stop = (): void => {
-    dispose();
-    resetState();
-  };
-
   const start = (): void => {
     recognition = new SpeechRecognitionAPI();
     if (!recognition) {
@@ -141,6 +126,14 @@ export default function createVoiceSearchHelper({
     recognition = undefined;
   };
 
+  const stop = (): void => {
+    dispose();
+    // Because `dispose` removes event listeners, `end` listener is not called.
+    // So we're setting the `status` as `finished` here.
+    // If we don't do it, it will be still `waiting` or `recognizing`.
+    resetState('finished');
+  };
+
   const toggleListening = (): void => {
     if (!isBrowserSupported()) {
       return;