diff --git a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
index 4e685ba14..c68dac880 100644
--- a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
+++ b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
@@ -46,6 +46,7 @@ class EventGroupWrapper extends React.PureComponent {
const isLocation = event.type === TYPES.LOCATION;
const whiteBg = isLastInGroup && event.type !== TYPES.LOCATION || (!isLastEvent && event.type !== TYPES.LOCATION)
+ const safeRef = String(event.referrer || '');
return (
- Referrer: { event.referrer }
+ Referrer: {safeRef}
}
diff --git a/frontend/app/components/ui/TextEllipsis/TextEllipsis.js b/frontend/app/components/ui/TextEllipsis/TextEllipsis.js
index 584cb323b..036d12d46 100644
--- a/frontend/app/components/ui/TextEllipsis/TextEllipsis.js
+++ b/frontend/app/components/ui/TextEllipsis/TextEllipsis.js
@@ -5,12 +5,12 @@ import { Popup } from 'UI';
import styles from './textEllipsis.module.css';
/** calculates text width in pixels
-+ * by creating a hidden element with t
-+ * ext and counting its width
-+ * @param text String - text string
-+ * @param fontProp String - font properties
-+ * @returns width number
-+ */
+ * by creating a hidden element with
+ * text and counting its width
+ * @param text String - text string
+ * @param fontProp String - font properties
+ * @returns width number
+ */
function findTextWidth(text, fontProp) {
const tag = document.createElement('div')
@@ -51,21 +51,27 @@ const TextEllipsis = ({
...props
}) => {
const [showPopup, setShowPopup] = useState(false)
+ const [computed, setComputed] = useState(false)
const textRef = useRef(null);
const textOrChildren = text || children;
- const popupId = (Math.random() + 1).toString(36).substring(7);
+ const popupId = (Math.random() + 1).toString(36).substring(2);
useEffect(() => {
- const element = textRef.current;
+ if (computed) return;
+ if (textRef.current) {
+ const element = textRef.current;
- const fontSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
+ const fontSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
+
+ const textWidth = findTextWidth(element.innerText, fontSize)
+ if (textWidth > element.clientWidth) setShowPopup(true)
+ else setShowPopup(false)
+ setComputed(true)
+ }
- const textWidth = findTextWidth(element.innerText, fontSize)
- if (textWidth > element.clientWidth) setShowPopup(true)
- else setShowPopup(false)
- }, [textRef.current])
+ }, [textRef.current, computed])
if (noHint || !showPopup) return (