Merge pull request Expensify#23990 from bernhardoj/fix/23784-wrong-to…

…oltip-shift Fix incorrect user display name tooltip position in money request confirmation page
margelo · Aug 2, 2023 · 4691d06 · 4691d06
2 parents 1137787 + e3fac0e
commit 4691d06
Showing 1 changed file with 3 additions and 14 deletions.
diff --git 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)}
             >