Merge pull request #15990 from s77rt/cloneElement-call-original-props

Fixed correct original props callback on cloneElement
Expensify · Mar 27, 2023 · bc8be8b · bc8be8b
2 parents 4aec557 + 17db507
commit bc8be8b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 18 deletions.
diff --git a/src/components/Form.js b/src/components/Form.js
@@ -277,22 +277,25 @@ class Form extends React.Component {
                 ref: (node) => {
                     this.inputRefs[inputID] = node;
 
-                    // Call the original ref, if any
                     const {ref} = child;
                     if (_.isFunction(ref)) {
                         ref(node);
                     }
                 },
                 value: this.state.inputValues[inputID],
                 errorText: this.state.errors[inputID] || fieldErrorMessage,
-                onBlur: () => {
+                onBlur: (event) => {
                     // We delay the validation in order to prevent Checkbox loss of focus when
                     // the user are focusing a TextInput and proceeds to toggle a CheckBox in
                     // web and mobile web platforms.
                     setTimeout(() => {
                         this.setTouchedInput(inputID);
                         this.validate(this.state.inputValues);
                     }, 200);
+
+                    if (_.isFunction(child.props.onBlur)) {
+                        child.props.onBlur(event);
+                    }
                 },
                 onInputChange: (value, key) => {
                     const inputKey = key || inputID;

diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js
@@ -69,30 +69,24 @@ class Hoverable extends Component {
                 onMouseEnter: (el) => {
                     this.setIsHovered(true);
 
-                    // Call the original onMouseEnter, if any
-                    const {onMouseEnter} = this.props.children;
-                    if (_.isFunction(onMouseEnter)) {
-                        onMouseEnter(el);
+                    if (_.isFunction(this.props.children.props.onMouseEnter)) {
+                        this.props.children.props.onMouseEnter(el);
                     }
                 },
                 onMouseLeave: (el) => {
                     this.setIsHovered(false);
 
-                    // Call the original onMouseLeave, if any
-                    const {onMouseLeave} = this.props.children;
-                    if (_.isFunction(onMouseLeave)) {
-                        onMouseLeave(el);
+                    if (_.isFunction(this.props.children.props.onMouseLeave)) {
+                        this.props.children.props.onMouseLeave(el);
                     }
                 },
                 onBlur: (el) => {
                     if (!this.wrapperView.contains(el.relatedTarget)) {
                         this.setIsHovered(false);
                     }
 
-                    // Call the original onBlur, if any
-                    const {onBlur} = this.props.children;
-                    if (_.isFunction(onBlur)) {
-                        onBlur(el);
+                    if (_.isFunction(this.props.children.props.onBlur)) {
+                        this.props.children.props.onBlur(el);
                     }
                 },
             });

diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
@@ -172,10 +172,8 @@ class Tooltip extends PureComponent {
                 onBlur: (el) => {
                     this.hideTooltip();
 
-                    // Call the original onBlur, if any
-                    const {onBlur} = this.props.children;
-                    if (_.isFunction(onBlur)) {
-                        onBlur(el);
+                    if (_.isFunction(this.props.children.props.onBlur)) {
+                        this.props.children.props.onBlur(el);
                     }
                 },
                 focusable: true,