Fix spotlight cmd-k wrongly expanding left panel (#7463)

src/components/structures/MatrixChat.tsx

@@ -794,6 +794,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 });
                 break;
             case 'focus_room_filter': // for CtrlOrCmd+K to work by expanding the left panel first
+                if (SettingsStore.getValue("feature_spotlight")) break; // don't expand if spotlight enabled
+                // fallthrough
             case 'show_left_panel':
                 this.setState({
                     collapseLhs: false,

src/components/structures/RoomSearch.tsx

@@ -93,11 +93,11 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     private onAction = (payload: ActionPayload) => {
         if (payload.action === Action.ViewRoom && payload.clear_search) {
             this.clearInput();
-        } else if (payload.action === 'focus_room_filter' && this.inputRef.current) {
+        } else if (payload.action === 'focus_room_filter') {
             if (SettingsStore.getValue("feature_spotlight")) {
                 this.openSpotlight();
             } else {
-                this.inputRef.current.focus();
+                this.inputRef.current?.focus();
             }
         }
     };
@@ -109,8 +109,12 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     };
 
     private openSearch = () => {
-        defaultDispatcher.dispatch({ action: "show_left_panel" });
+        if (SettingsStore.getValue("feature_spotlight")) {
-        defaultDispatcher.dispatch({ action: "focus_room_filter" });
+            this.openSpotlight();
+        } else {
+            defaultDispatcher.dispatch({ action: "show_left_panel" });
+            defaultDispatcher.dispatch({ action: "focus_room_filter" });
+        }
     };
 
     private onChange = () => {

src/components/structures/SearchBox.tsx

@@ -20,10 +20,8 @@ import { throttle } from 'lodash';
 import classNames from 'classnames';
 
 import { Key } from '../../Keyboard';
-import dis from '../../dispatcher/dispatcher';
 import AccessibleButton from '../../components/views/elements/AccessibleButton';
 import { replaceableComponent } from "../../utils/replaceableComponent";
-import { Action } from '../../dispatcher/actions';
 
 interface IProps extends HTMLProps<HTMLInputElement> {
     onSearch?: (query: string) => void;
@@ -37,11 +35,6 @@ interface IProps extends HTMLProps<HTMLInputElement> {
     autoFocus?: boolean;
     initialValue?: string;
     collapsed?: boolean;
-
-    // If true, the search box will focus and clear itself
-    // on room search focus action (it would be nicer to take
-    // this functionality out, but not obvious how that would work)
-    enableRoomSearchFocus?: boolean;
 }
 
 interface IState {
@@ -51,13 +44,8 @@ interface IState {
 
 @replaceableComponent("structures.SearchBox")
 export default class SearchBox extends React.Component<IProps, IState> {
-    private dispatcherRef: string;
     private search = createRef<HTMLInputElement>();
 
-    static defaultProps: Partial<IProps> = {
-        enableRoomSearchFocus: false,
-    };
-
     constructor(props: IProps) {
         super(props);
 
@@ -67,31 +55,6 @@ export default class SearchBox extends React.Component<IProps, IState> {
         };
     }
 
-    public componentDidMount(): void {
-        this.dispatcherRef = dis.register(this.onAction);
-    }
-
-    public componentWillUnmount(): void {
-        dis.unregister(this.dispatcherRef);
-    }
-
-    private onAction = (payload): void => {
-        if (!this.props.enableRoomSearchFocus) return;
-
-        switch (payload.action) {
-            case Action.ViewRoom:
-                if (this.search.current && payload.clear_search) {
-                    this.clearSearch();
-                }
-                break;
-            case 'focus_room_filter':
-                if (this.search.current) {
-                    this.search.current.focus();
-                }
-                break;
-        }
-    };
-
     private onChange = (): void => {
         if (!this.search.current) return;
         this.setState({ searchTerm: this.search.current.value });
@@ -137,7 +100,7 @@ export default class SearchBox extends React.Component<IProps, IState> {
     public render(): JSX.Element {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
         const { onSearch, onCleared, onKeyDown, onFocus, onBlur, className = "", placeholder, blurredPlaceholder,
-            autoFocus, initialValue, collapsed, enableRoomSearchFocus, ...props } = this.props;
+            autoFocus, initialValue, collapsed, ...props } = this.props;
 
         // check for collapsed here and
         // not at parent so we keep