fix(speaker-stats): prevent search from closing when enter pressed and from keeping previous state (#10597)

* fix(speaker-stats): prevent search from closing when enter pressed and from keeping previous state

* fix(speaker-stats): remove unnecessary blank lines

* fix(speaker-stats): add empty dependencies to prevent dismiss callback

* add(speaker-stats): reset search criteria action

react/features/speaker-stats/actionTypes.js

@@ -38,3 +38,12 @@ export const UPDATE_STATS = 'UPDATE_STATS';
  */
 export const INIT_REORDER_STATS = 'INIT_REORDER_STATS';
 
+/**
+ * Action type to reset the search criteria.
+ *
+ * {
+ *     type: RESET_SEARCH_CRITERIA
+ * }
+ */
+export const RESET_SEARCH_CRITERIA = 'RESET_SEARCH_CRITERIA'
+

react/features/speaker-stats/actions.any.js

@@ -4,7 +4,8 @@ import {
     INIT_SEARCH,
     INIT_UPDATE_STATS,
     UPDATE_STATS,
-    INIT_REORDER_STATS
+    INIT_REORDER_STATS,
+    RESET_SEARCH_CRITERIA
 } from './actionTypes';
 
 /**
@@ -56,3 +57,14 @@ export function initReorderStats() {
         type: INIT_REORDER_STATS
     };
 }
+
+/**
+ * Resets the search criteria.
+ *
+ * @returns {Object}
+ */
+export function resetSearchCriteria() {
+    return {
+        type: RESET_SEARCH_CRITERIA
+    };
+}

react/features/speaker-stats/components/web/SpeakerStats.js

@@ -7,7 +7,7 @@ import { Dialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
 import { connect } from '../../../base/redux';
 import { escapeRegexp } from '../../../base/util';
-import { initSearch } from '../../actions';
+import { initSearch, resetSearchCriteria } from '../../actions';
 
 import SpeakerStatsLabels from './SpeakerStatsLabels';
 import SpeakerStatsList from './SpeakerStatsList';
@@ -65,6 +65,16 @@ class SpeakerStats extends Component<Props> {
         this._onSearch = this._onSearch.bind(this);
     }
 
+    /**
+     * Resets the search criteria when component will unmount.
+     *
+     * @private
+     * @returns {void}
+     */
+    componentWillUnmount() {
+        this.props.dispatch(resetSearchCriteria());
+    }
+
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/speaker-stats/components/web/SpeakerStatsSearch.js

@@ -54,6 +54,11 @@ function SpeakerStatsSearch({ onSearch }: Props) {
         onSearch && onSearch(value);
     }, []);
     const disableSpeakerStatsSearch = useSelector(isSpeakerStatsSearchDisabled);
+    const preventDismiss = useCallback((evt: KeyboardEvent) => {
+        if (evt.key === 'Enter') {
+            evt.preventDefault();
+        }
+    }, []);
 
     if (disableSpeakerStatsSearch) {
         return null;
@@ -67,6 +72,7 @@ function SpeakerStatsSearch({ onSearch }: Props) {
                 compact = { true }
                 name = 'speakerStatsSearch'
                 onChange = { onChange }
+                onKeyPress = { preventDismiss }
                 placeholder = { t('speakerStats.search') }
                 shouldFitContainer = { false }
                 type = 'text'

react/features/speaker-stats/reducer.js

@@ -7,7 +7,8 @@ import { ReducerRegistry } from '../base/redux';
 import {
     INIT_SEARCH,
     UPDATE_STATS,
-    INIT_REORDER_STATS
+    INIT_REORDER_STATS,
+    RESET_SEARCH_CRITERIA
 } from './actionTypes';
 
 /**
@@ -30,6 +31,8 @@ ReducerRegistry.register('features/speaker-stats', (state = _getInitialState(),
         return _updateStats(state, action);
     case INIT_REORDER_STATS:
         return _initReorderStats(state);
+    case RESET_SEARCH_CRITERIA:
+        return _updateCriteria(state, { criteria: null });
     }
 
     return state;