From 23a5aa275175c304cd24fc1a62761a20fd4e9c30 Mon Sep 17 00:00:00 2001
From: saltrafael <oversaid_logodaedaly@slmail.me>
Date: Thu, 30 Sep 2021 16:17:09 -0300
Subject: [PATCH] Fix breaking for invalid URI query

---
 .../channelMentionSuggestions/index.js         |  2 +-
 .../channelMentionSuggestions/view.jsx         | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/ui/component/channelMentionSuggestions/index.js b/ui/component/channelMentionSuggestions/index.js
index 188bdf7e5..15192290a 100644
--- a/ui/component/channelMentionSuggestions/index.js
+++ b/ui/component/channelMentionSuggestions/index.js
@@ -10,7 +10,7 @@ const select = (state, props) => {
   const subscriptionUris = selectSubscriptions(state).map(({ uri }) => uri);
   const topLevelComments = makeSelectTopLevelCommentsForUri(props.uri)(state);
 
-  let commentorUris = [];
+  const commentorUris = [];
   topLevelComments.map(({ channel_url }) => !commentorUris.includes(channel_url) && commentorUris.push(channel_url));
 
   const getUnresolved = (uris) =>
diff --git a/ui/component/channelMentionSuggestions/view.jsx b/ui/component/channelMentionSuggestions/view.jsx
index 38094434b..3d4e1b771 100644
--- a/ui/component/channelMentionSuggestions/view.jsx
+++ b/ui/component/channelMentionSuggestions/view.jsx
@@ -1,7 +1,7 @@
 // @flow
 import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList } from '@reach/combobox';
 import { Form } from 'component/common/form';
-import { parseURI } from 'lbry-redux';
+import { parseURI, regexInvalidURI } from 'lbry-redux';
 import { SEARCH_OPTIONS } from 'constants/search';
 import * as KEYCODES from 'constants/keycodes';
 import ChannelMentionSuggestion from 'component/channelMentionSuggestion';
@@ -46,10 +46,10 @@ export default function ChannelMentionSuggestions(props: Props) {
   const comboboxListRef: ElementRef<any> = React.useRef();
   const [debouncedTerm, setDebouncedTerm] = React.useState('');
 
-  const isRefFocused = (ref) => ref && ref.current && ref.current === document.activeElement;
+  const isRefFocused = (ref) => ref && ref.current === document.activeElement;
 
-  let subscriptionUris = props.subscriptionUris.filter((uri) => uri !== creatorUri);
-  let commentorUris = props.commentorUris.filter((uri) => uri !== creatorUri && !subscriptionUris.includes(uri));
+  const subscriptionUris = props.subscriptionUris.filter((uri) => uri !== creatorUri);
+  const commentorUris = props.commentorUris.filter((uri) => uri !== creatorUri && !subscriptionUris.includes(uri));
 
   const termToMatch = mentionTerm && mentionTerm.replace('@', '').toLowerCase();
   const allShownUris = [creatorUri, ...subscriptionUris, ...commentorUris];
@@ -74,6 +74,8 @@ export default function ChannelMentionSuggestions(props: Props) {
   const isTyping = debouncedTerm !== mentionTerm;
   const showPlaceholder = isTyping || loading;
 
+  const isUriFromTermValid = !regexInvalidURI.test(mentionTerm.substring(1));
+
   const handleSelect = React.useCallback(
     (value, key) => {
       if (customSelectAction) {
@@ -95,12 +97,12 @@ export default function ChannelMentionSuggestions(props: Props) {
   React.useEffect(() => {
     if (!inputRef) return;
 
-    if (mentionTerm) {
+    if (mentionTerm && isUriFromTermValid) {
       inputRef.current.classList.add('textarea-mention');
     } else {
       inputRef.current.classList.remove('textarea-mention');
     }
-  }, [inputRef, mentionTerm]);
+  }, [inputRef, isUriFromTermValid, mentionTerm]);
 
   React.useEffect(() => {
     if (!inputRef || !comboboxInputRef || !mentionTerm) return;
@@ -155,7 +157,7 @@ export default function ChannelMentionSuggestions(props: Props) {
   React.useEffect(() => {
     if (isTyping) return;
 
-    let urisToResolve = [];
+    const urisToResolve = [];
     subscriptionUris.map(
       (uri) =>
         hasMinLength &&
@@ -189,7 +191,7 @@ export default function ChannelMentionSuggestions(props: Props) {
     <Form onSubmit={() => handleSelect(mentionTerm)}>
       <Combobox className="channel-mention" onSelect={handleSelect}>
         <ComboboxInput ref={comboboxInputRef} className="channel-mention__input--none" value={mentionTerm} />
-        {mentionTerm && (
+        {mentionTerm && isUriFromTermValid && (
           <ComboboxPopover portal={false} className="channel-mention__suggestions">
             <ComboboxList ref={comboboxListRef}>
               {creatorUri &&