From 54909f53398233a75ced2bc284de065e7f36dd63 Mon Sep 17 00:00:00 2001
From: Fabio Barbero <faba@odoo.com>
Date: Mon, 4 Oct 2021 12:16:22 +0000
Subject: [PATCH] [IMP] survey: update "Press Enter" tooltip depending on field
 type

Purpose
=======
Have the "or press CTRL+Enter" (metaKey if it's a mac) shown if the input field selected is a text area, and "or press Enter" otherwise.
Hide the text at the beginning of the survey if it's from mobile.

PR: odoo/odoo/pull/77726
Task-2637120

closes odoo/odoo#77726

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
---
 addons/survey/static/src/js/survey_form.js | 16 +++++++++++++++-
 addons/survey/views/survey_templates.xml   | 14 ++++++++------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/addons/survey/static/src/js/survey_form.js b/addons/survey/static/src/js/survey_form.js
index fe750c435e5..7570f915156 100644
--- a/addons/survey/static/src/js/survey_form.js
+++ b/addons/survey/static/src/js/survey_form.js
@@ -10,6 +10,7 @@ var dom = require('web.dom');
 var utils = require('web.utils');
 
 var _t = core._t;
+var isMac = navigator.platform.toUpperCase().includes('MAC');
 
 publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
     selector: '.o_survey_form',
@@ -17,6 +18,8 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
         'change .o_survey_form_choice_item': '_onChangeChoiceItem',
         'click .o_survey_matrix_btn': '_onMatrixBtnClick',
         'click button[type="submit"]': '_onSubmit',
+        'focusin .form-control': '_updateEnterButtonText',
+        'focusout .form-control': '_updateEnterButtonText'
     },
     custom_events: {
         'breadcrumb_click': '_onBreadcrumbClick',
@@ -89,7 +92,7 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
      */
     _onKeyDown: function (event) {
         // If user is answering a text input, do not handle keydown (can be forced by pressing CTRL)
-        if ((this.$("textarea").is(":focus") || this.$('input').is(':focus')) && !event.ctrlKey) {
+        if ((this.$("textarea").is(":focus") || this.$('input').is(':focus')) && !(event.ctrlKey || event.metaKey)) {
             return;
         }
         // If in session mode and question already answered, do not handle keydown
@@ -271,6 +274,17 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
 
     // Custom Events
     // -------------------------------------------------------------------------
+    
+    /**
+     * Changes the tooltip according to the type of the field.
+     * @param {Event} event 
+     */
+    _updateEnterButtonText: function (event) {
+        const $target = event.target;
+        const isTextbox = event.type == "focusin" && $target.tagName.toLowerCase() === 'textarea';
+        const text = !isTextbox ? _t('or press Enter') : isMac ? _t("or press ⌘+Enter") : _t("or press CTRL+Enter");
+        $('#enter-tooltip').text(text);
+    },
 
     _onBreadcrumbClick: function (event) {
         this._submitForm({'previousPageId': event.data.previousPageId});
diff --git a/addons/survey/views/survey_templates.xml b/addons/survey/views/survey_templates.xml
index 4f6d1b3d7bd..d00d84fd545 100644
--- a/addons/survey/views/survey_templates.xml
+++ b/addons/survey/views/survey_templates.xml
@@ -149,7 +149,7 @@
                             Start Survey
                         </t>
                     </button>
-                    <span class="o_survey_enter font-weight-bold text-muted ml-2">or press Enter</span>
+                    <span class="o_survey_enter font-weight-bold text-muted ml-2 d-none d-md-inline">or press Enter</span>
                 </t>
             </div>
         </div>
@@ -171,8 +171,10 @@
             </t>
 
             <div class="text-center mt16 mb256">
-                <button type="submit" value="finish" class="btn btn-primary">
-                    Submit</button><span class="font-weight-bold text-muted ml-2 d-none d-md-inline">or press Enter</span>
+                <button type="submit" value="finish" class="btn btn-primary">Submit</button>
+                    <span class="font-weight-bold text-muted ml-2 d-none d-md-inline">
+                        <span id="enter-tooltip">or press Enter</span>
+                    </span>
             </div>
         </t>
 
@@ -190,7 +192,8 @@
                     <button type="submit" t-att-value="'next' if not survey_last else 'finish'" class="btn btn-primary">
                         <t t-if="not survey_last">Continue</t>
                         <t t-else="">Submit</t>
-                    </button><span class="font-weight-bold text-muted ml-2 d-none d-md-inline"> or press Enter</span>
+                    </button>
+                    <span class="font-weight-bold text-muted ml-2 d-none d-md-inline" id="enter-tooltip"> or press Enter</span>
                 </div>
             </div>
         </t>
@@ -229,8 +232,7 @@
                             <t t-else="">Continue</t>
                         </button>
                         <span class="font-weight-bold text-muted ml-2 d-none d-md-inline">
-                            <span t-if="question.question_type == 'text_box'">or press CTRL+Enter</span>
-                            <span t-else="">or press Enter</span>
+                            <span id="enter-tooltip">or press Enter</span>
                         </span>
                     </div>
                 </div>