D5726.diff
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

D5726.diff
View Options

	diff --git a/web/chat/mention-suggestion-tooltip.css b/web/chat/mention-suggestion-tooltip.css
	--- a/web/chat/mention-suggestion-tooltip.css
	+++ b/web/chat/mention-suggestion-tooltip.css
	@@ -56,3 +56,12 @@
	.suggestion:hover {
	background-color: var(--typeahead-overlay-light);
	}
	+
	+.notVisible {
	+ opacity: 0;
	+}
	+
	+.visible {
	+ opacity: 1;
	+ transition: opacity 100ms ease-in;
	+}
	diff --git a/web/chat/mention-suggestion-tooltip.react.js b/web/chat/mention-suggestion-tooltip.react.js
	--- a/web/chat/mention-suggestion-tooltip.react.js
	+++ b/web/chat/mention-suggestion-tooltip.react.js
	@@ -1,5 +1,6 @@
	// @flow

	+import classNames from 'classnames';
	import * as React from 'react';

	import SearchIndex from 'lib/shared/search-index';
	@@ -36,6 +37,13 @@
	viewerID,
	matchedStrings,
	} = props;
	+ const [isVisible, setIsVisible] = React.useState(false);
	+
	+ React.useEffect(() => {
	+ setIsVisible(true);
	+
	+ return () => setIsVisible(false);
	+ }, [setIsVisible]);

	const {
	entireText: matchedText,
	@@ -103,8 +111,13 @@
	return null;
	}

	+ const overlayClasses = classNames(css.suggestionsContainer, {
	+ [css.notVisible]: !isVisible,
	+ [css.visible]: isVisible,
	+ });
	+
	return (
	- <div className={css.suggestionsContainer} style={tooltipPositionStyle}>
	+ <div className={overlayClasses} style={tooltipPositionStyle}>
	{tooltipButtons}
	</div>
	);