diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx b/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx
index fe3e062f715..a7125820996 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx
+++ b/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 (
- ) : null;
+ );
},
);
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts
index 4de5a575799..b7a7236dda9 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts
+++ b/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) => void;
suggestion: MappedSuggestion | null;
} {
- const [suggestionData, setSuggestionData] = useState(null);
+ const [suggestionData, setSuggestionData0] = useState(null);
+
+ // debug for https://github.com/vector-im/element-web/issues/26037
+ const setSuggestionData = (suggestionData: SetStateAction): 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