diff --git a/ui/component/channelMentionSuggestions/view.jsx b/ui/component/channelMentionSuggestions/view.jsx index d0aa69b2830..38094434b86 100644 --- a/ui/component/channelMentionSuggestions/view.jsx +++ b/ui/component/channelMentionSuggestions/view.jsx @@ -26,7 +26,7 @@ type Props = { subscriptionUris: Array, unresolvedSubscriptions: Array, doResolveUris: (Array) => void, - customSelectAction?: (string) => void, + customSelectAction?: (string, number) => void, }; export default function ChannelMentionSuggestions(props: Props) { @@ -75,14 +75,13 @@ export default function ChannelMentionSuggestions(props: Props) { const showPlaceholder = isTyping || loading; const handleSelect = React.useCallback( - (value) => { + (value, key) => { if (customSelectAction) { // Give them full results, as our resolved one might truncate the claimId. - customSelectAction(value || (results && results.find((r) => r.startsWith(value))) || ''); + customSelectAction(value || (results && results.find((r) => r.startsWith(value))) || '', Number(key)); } - if (inputRef && inputRef.current) inputRef.current.focus(); }, - [customSelectAction, inputRef, results] + [customSelectAction, results] ); React.useEffect(() => { @@ -124,11 +123,11 @@ export default function ChannelMentionSuggestions(props: Props) { const activeValue = activeElement && activeElement.getAttribute('value'); if (activeValue) { - handleSelect(activeValue); + handleSelect(activeValue, keyCode); } else if (possibleMatches.length) { - handleSelect(possibleMatches[0]); + handleSelect(possibleMatches[0], keyCode); } else if (results) { - handleSelect(mentionTerm); + handleSelect(mentionTerm, keyCode); } } if (isRefFocused(comboboxInputRef)) inputRef.current.focus(); diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx index 776eceba114..3e336954375 100644 --- a/ui/component/commentCreate/view.jsx +++ b/ui/component/commentCreate/view.jsx @@ -28,6 +28,7 @@ let stripeEnvironment = getStripeEnvironment(); const TAB_FIAT = 'TabFiat'; const TAB_LBC = 'TabLBC'; +const MENTION_DEBOUNCE_MS = 100; type Props = { uri: string, @@ -103,6 +104,7 @@ export function CommentCreate(props: Props) { const [activeTab, setActiveTab] = React.useState(''); const [tipError, setTipError] = React.useState(); const [deletedComment, setDeletedComment] = React.useState(false); + const [pauseQuickSend, setPauseQuickSend] = React.useState(false); const [shouldDisableReviewButton, setShouldDisableReviewButton] = React.useState(); const selectedMentionIndex = @@ -123,7 +125,7 @@ export function CommentCreate(props: Props) { const channelUri = signingChannel && signingChannel.permanent_url; const hasChannels = channels && channels.length; const charCount = commentValue ? commentValue.length : 0; - const disabled = deletedComment || isSubmitting || isFetchingChannels || !commentValue.length; + const disabled = deletedComment || isSubmitting || isFetchingChannels || !commentValue.length || pauseQuickSend; const channelId = getChannelIdFromClaim(claim); const channelSettings = channelId ? settingsByChannelId[channelId] : undefined; const minSuper = (channelSettings && channelSettings.min_tip_amount_super_chat) || 0; @@ -170,7 +172,7 @@ export function CommentCreate(props: Props) { setCommentValue(commentValue); } - function handleSelectMention(mentionValue) { + function handleSelectMention(mentionValue, key) { let newMentionValue = mentionValue.replace('lbry://', ''); if (newMentionValue.includes('#')) { const fullId = newMentionValue.substring(newMentionValue.indexOf('#') + 1, newMentionValue.length); @@ -179,6 +181,7 @@ export function CommentCreate(props: Props) { .replace('#', ':'); } + if (livestream && key !== KEYCODES.TAB) setPauseQuickSend(true); setCommentValue( commentValue.substring(0, selectedMentionIndex) + `${newMentionValue}` + @@ -416,6 +419,18 @@ export function CommentCreate(props: Props) { } }, [fetchComment, shouldFetchComment, parentId]); + // Debounce for disabling the submit button when mentioning a user with Enter + // so that the comment isn't sent at the same time + React.useEffect(() => { + const timer = setTimeout(() => { + if (pauseQuickSend) { + setPauseQuickSend(false); + } + }, MENTION_DEBOUNCE_MS); + + return () => clearTimeout(timer); + }, [pauseQuickSend]); + // ************************************************************************** // Render // **************************************************************************