Add debug to diagnose flaky composer test (#11467)

Part of my attempts to fix #26037.

Nobody seems to know how this currently works, so let's add a load of debugging.

src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React, { ForwardedRef, forwardRef } from "react";
 import { FormattingFunctions, MappedSuggestion } from "@matrix-org/matrix-wysiwyg";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { useRoomContext } from "../../../../../contexts/RoomContext";
 import Autocomplete from "../../Autocomplete";
@@ -97,19 +98,25 @@ const WysiwygAutocomplete = forwardRef(
             }
         }
 
+        if (!room) return null;
+
+        const autoCompleteQuery = buildQuery(suggestion);
+        // debug for https://github.com/vector-im/element-web/issues/26037
+        logger.log(`## 26037 ## Rendering Autocomplete for WysiwygAutocomplete with query: "${autoCompleteQuery}"`);
+
         // TODO - determine if we show all of the /command suggestions, there are some options in the
         // list which don't seem to make sense in this context, specifically /html and /plain
-        return room ? (
+        return (
             <div className="mx_WysiwygComposer_AutoCompleteWrapper" data-testid="autocomplete-wrapper">
                 <Autocomplete
                     ref={ref}
-                    query={buildQuery(suggestion)}
+                    query={autoCompleteQuery}
                     onConfirm={handleConfirm}
                     selection={{ start: 0, end: 0 }}
                     room={room}
                 />
             </div>
-        ) : null;
+        );
     },
 );
 

src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts

@@ -15,7 +15,8 @@ limitations under the License.
 */
 
 import { AllowedMentionAttributes, MappedSuggestion } from "@matrix-org/matrix-wysiwyg";
-import { SyntheticEvent, useState } from "react";
+import { SyntheticEvent, useState, SetStateAction } from "react";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { isNotNull } from "../../../../../Typeguards";
 
@@ -59,7 +60,20 @@ export function useSuggestion(
     onSelect: (event: SyntheticEvent<HTMLDivElement>) => void;
     suggestion: MappedSuggestion | null;
 } {
-    const [suggestionData, setSuggestionData] = useState<SuggestionState>(null);
+    const [suggestionData, setSuggestionData0] = useState<SuggestionState>(null);
+
+    // debug for https://github.com/vector-im/element-web/issues/26037
+    const setSuggestionData = (suggestionData: SetStateAction<SuggestionState>): void => {
+        // setState allows either the data itself or a callback which returns the data
+        logger.log(
+            `## 26037 ## wysiwyg useSuggestion hook setting suggestion data to ${
+                suggestionData === null || suggestionData instanceof Function
+                    ? suggestionData
+                    : suggestionData.mappedSuggestion.keyChar + suggestionData.mappedSuggestion.text
+            }`,
+        );
+        setSuggestionData0(suggestionData);
+    };
 
     // We create a `selectionchange` handler here because we need to know when the user has moved the cursor,
     // we can not depend on input events only