From e3fac0ea313b24f322a4feb097bd952723eeef49 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Tue, 1 Aug 2023 18:24:28 +0800
Subject: [PATCH] fix incorrect container position

---
 src/components/DisplayNames/index.js | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js
index 5e601f1362dc..6a7123f723f8 100644
--- a/src/components/DisplayNames/index.js
+++ b/src/components/DisplayNames/index.js
@@ -15,7 +15,6 @@ class DisplayNames extends PureComponent {
         this.state = {
             isEllipsisActive: false,
         };
-        this.setContainerLayout = this.setContainerLayout.bind(this);
         this.getTooltipShiftX = this.getTooltipShiftX.bind(this);
     }
 
@@ -25,15 +24,6 @@ class DisplayNames extends PureComponent {
         });
     }
 
-    /**
-     * Set the container layout for post calculations
-     *
-     * @param {*} {nativeEvent}
-     */
-    setContainerLayout({nativeEvent}) {
-        this.containerLayout = nativeEvent.layout;
-    }
-
     /**
      * We may need to shift the Tooltip horizontally as some of the inline text wraps well with ellipsis,
      * but their container node overflows the parent view which causes the tooltip to be misplaced.
@@ -47,11 +37,11 @@ class DisplayNames extends PureComponent {
      * @returns {Number} Distance to shift the tooltip horizontally
      */
     getTooltipShiftX(index) {
-        // Only shift the tooltip in case the containerLayout or Refs to the text node are available
-        if (!this.containerLayout || !this.childRefs[index]) {
+        // Only shift the tooltip in case the container ref or Refs to the text node are available
+        if (!this.containerRef || !this.childRefs[index]) {
             return;
         }
-        const {width: containerWidth, left: containerLeft} = this.containerLayout;
+        const {width: containerWidth, left: containerLeft} = this.containerRef.getBoundingClientRect();
 
         // We have to return the value as Number so we can't use `measureWindow` which takes a callback
         const {width: textNodeWidth, left: textNodeLeft} = this.childRefs[index].getBoundingClientRect();
@@ -81,7 +71,6 @@ class DisplayNames extends PureComponent {
             // Tokenization of string only support prop numberOfLines on Web
             <Text
                 style={[...this.props.textStyles, styles.pRelative]}
-                onLayout={this.setContainerLayout}
                 numberOfLines={this.props.numberOfLines || undefined}
                 ref={(el) => (this.containerRef = el)}
             >