From 380ef3da0b0c8df20977a21d69ce41a5e78c6d36 Mon Sep 17 00:00:00 2001
From: Vlad Piersec <vlad.piersec@8x8.com>
Date: Wed, 15 Sep 2021 11:13:05 +0300
Subject: [PATCH] fix(feedback): Scroll to the top when opening feedback dialog

---
 .../dialog/components/web/StatelessDialog.js  | 25 +++++++++++--------
 .../feedback/components/FeedbackDialog.web.js | 13 ++++++++++
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/react/features/base/dialog/components/web/StatelessDialog.js b/react/features/base/dialog/components/web/StatelessDialog.js
index ad3b94ec3..f656850c6 100644
--- a/react/features/base/dialog/components/web/StatelessDialog.js
+++ b/react/features/base/dialog/components/web/StatelessDialog.js
@@ -28,8 +28,7 @@ const OK_BUTTON_ID = 'modal-dialog-ok-button';
  *
  * @static
  */
-type Props = {
-    ...DialogProps,
+type Props = DialogProps & {
 
     /**
      * Custom dialog header that replaces the standard heading.
@@ -77,6 +76,11 @@ type Props = {
      */
     onDecline?: Function,
 
+    /**
+     * Callback invoked when setting the ref of the Dialog.
+     */
+    onDialogRef?: Function,
+
     /**
      * Disables rendering of the submit button.
      */
@@ -127,7 +131,7 @@ class StatelessDialog extends Component<Props> {
         this._onKeyPress = this._onKeyPress.bind(this);
         this._onSubmit = this._onSubmit.bind(this);
         this._renderFooter = this._renderFooter.bind(this);
-        this._setDialogElement = this._setDialogElement.bind(this);
+        this._onDialogRef = this._onDialogRef.bind(this);
     }
 
     /**
@@ -166,7 +170,7 @@ class StatelessDialog extends Component<Props> {
                 width = { width || 'medium' }>
                 <div
                     onKeyPress = { this._onKeyPress }
-                    ref = { this._setDialogElement }>
+                    ref = { this._onDialogRef }>
                     <form
                         className = 'modal-dialog-form'
                         id = 'modal-dialog-form'
@@ -319,19 +323,18 @@ class StatelessDialog extends Component<Props> {
         );
     }
 
-    _setDialogElement: (?HTMLElement) => void;
+    _onDialogRef: (?Element) => void;
 
     /**
-     * Sets the instance variable for the div containing the component's dialog
-     * element so it can be accessed directly.
+     * Callback invoked when setting the ref of the dialog's child passing the Modal ref.
+     * It is done this way because we cannot directly access the ref of the Modal component.
      *
-     * @param {HTMLElement} element - The DOM element for the component's
-     * dialog.
+     * @param {HTMLElement} element - The DOM element for the dialog.
      * @private
      * @returns {void}
      */
-    _setDialogElement(element: ?HTMLElement) {
-        this._dialogElement = element;
+    _onDialogRef(element: ?Element) {
+        this.props.onDialogRef && this.props.onDialogRef(element && element.parentNode);
     }
 
     _onKeyPress: (Object) => void;
diff --git a/react/features/feedback/components/FeedbackDialog.web.js b/react/features/feedback/components/FeedbackDialog.web.js
index 8eb2d3700..abeeaa296 100644
--- a/react/features/feedback/components/FeedbackDialog.web.js
+++ b/react/features/feedback/components/FeedbackDialog.web.js
@@ -36,6 +36,10 @@ const SCORES = [
     'feedback.veryGood'
 ];
 
+type Scrollable = {
+    scroll: Function
+}
+
 /**
  * The type of the React {@code Component} props of {@link FeedbackDialog}.
  */
@@ -171,6 +175,12 @@ class FeedbackDialog extends Component<Props, State> {
         this._onScoreContainerMouseLeave
             = this._onScoreContainerMouseLeave.bind(this);
         this._onSubmit = this._onSubmit.bind(this);
+
+        // On some mobile browsers opening Feedback dialog scrolls down the whole content because of the keyboard.
+        // By scrolling to the top we prevent hiding the feedback stars so the user knows those exist.
+        this._onScrollTop = (node: ?Scrollable) => {
+            node && node.scroll && node.scroll(0, 0);
+        };
     }
 
     /**
@@ -244,6 +254,7 @@ class FeedbackDialog extends Component<Props, State> {
             <Dialog
                 okKey = 'dialog.Submit'
                 onCancel = { this._onCancel }
+                onDialogRef = { this._onScrollTop }
                 onSubmit = { this._onSubmit }
                 titleKey = 'feedback.rateExperience'>
                 <div className = 'feedback-dialog'>
@@ -364,6 +375,8 @@ class FeedbackDialog extends Component<Props, State> {
 
         return true;
     }
+
+    _onScrollTop: (node: ?Scrollable) => void;
 }
 
 /**