From 5a2f7a46cfbcdfd4924dc726e01998ca0c61ccc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Mottet=20=28oms=29?= <oms@odoo.com>
Date: Fri, 23 Apr 2021 13:49:46 +0000
Subject: [PATCH] [FIX] website: remove outerText and fix design flaw in
 configurator

- outerText is a non-standard feature. It is not
  supported by firefox and should not be used. This
  commit replaced it by value.

- The design of the industry selection screen had
  a misalignment flaw on firefox. This commit fixed
  it.

- The industry selection used a <i/> element instead
  of an <input/>.

closes odoo/odoo#70694

X-original-commit: 2dbbb4e38d603cbb5956fa61040a9497f60c3349
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Stefano Rigano <sri@odoo.com>
---
 .../components/configurator/configurator.js   |  8 +--
 .../components/configurator/configurator.xml  | 14 ++---
 .../website/static/src/scss/configurator.scss | 51 +++++++++++++------
 3 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/addons/website/static/src/components/configurator/configurator.js b/addons/website/static/src/components/configurator/configurator.js
index 61ad1a36c05..6eaeccb491a 100644
--- a/addons/website/static/src/components/configurator/configurator.js
+++ b/addons/website/static/src/components/configurator/configurator.js
@@ -128,22 +128,24 @@ class DescriptionScreen extends Component {
     }
 
     selectIndustry(_, ui) {
+        this.industrySelection.el.parentNode.dataset.value = ui.item.label;
         this.dispatch('selectIndustry', this.labelToId[ui.item.label]);
         this.checkDescriptionCompletion();
     }
 
     blurIndustrySelection(ev) {
-        const id = this.labelToId[ev.target.outerText];
+        const id = this.labelToId[ev.target.value];
         this.dispatch('selectIndustry', id);
         if (id === undefined) {
-            this.industrySelection.el.textContent = '';
+            this.industrySelection.el.value = '';
+            this.industrySelection.el.parentNode.dataset.value = '';
         } else {
             this.checkDescriptionCompletion();
         }
     }
 
     inputIndustrySelection(ev) {
-        this.dispatch('selectIndustry', this.labelToId[ev.target.outerText]);
+        this.industrySelection.el.parentNode.dataset.value = ev.target.value;
     }
 
     selectWebsiteType(ev) {
diff --git a/addons/website/static/src/components/configurator/configurator.xml b/addons/website/static/src/components/configurator/configurator.xml
index 872ded4f07a..33d414f2250 100644
--- a/addons/website/static/src/components/configurator/configurator.xml
+++ b/addons/website/static/src/components/configurator/configurator.xml
@@ -44,7 +44,7 @@
                                 <i class="fa fa-angle-down text-black-50 ml-auto pl-2" title="dropdown_angle_down" role="img"/>
                             </a>
                         </div>
-                        <div t-attf-class="dropdown-menu w-100 border-0 shadow-lg {{state.selectedType ? 'o_step_completed' : 'o_step_todo show'}}" role="menu">
+                        <div t-attf-class="dropdown-menu border-0 shadow-lg {{state.selectedType ? 'o_step_completed' : 'o_step_todo show'}}" role="menu">
                             <t t-foreach="getters.getWebsiteTypes()" t-as="type" t-key="type.name">
                                 <a t-att-title="type.name" t-att-data-id="type.id" t-on-click="selectWebsiteType" class="dropdown-item o_change_website_type">
                                     <t t-esc="type.label"/>
@@ -52,12 +52,12 @@
                             </t>
                         </div>
                     </div>
-                    <span t-att-class="!state.selectedType ? 'o_configurator_hide' : 'o_configurator_show'"> for my</span>
+                    <span t-attf-class="mr-2 {{!state.selectedType ? 'o_configurator_hide' : 'o_configurator_show'}}"> for my</span>
                 </div>
-                <div t-attf-class="o_configurator_typing_text d-inline d-md-block o_configurator_industry mb-md-2 mb-lg-4 {{!state.selectedType ? 'o_configurator_hide' : 'o_configurator_show'}}">
-                    <div class="o_configurator_industry_wrapper position-relative d-inline">
-                        <i t-attf-class="industry_selection d-inline d-md-inline-block rounded bg-100 px-2 px-md-3 mx-2 mx-md-0 {{state.selectedIndustry ? 'o_step_completed' : 'o_step_todo show'}}" contenteditable="True" t-on-blur="blurIndustrySelection" t-on-input="inputIndustrySelection" t-ref="industrySelection"/>
-                    </div>
+                <div t-attf-class="o_configurator_typing_text d-inline d-md-flex align-items-center o_configurator_industry mb-md-2 mb-lg-4 {{!state.selectedType ? 'o_configurator_hide' : 'o_configurator_show'}}">
+                    <label class="o_configurator_industry_wrapper mr-2">
+                        <input t-on-blur="blurIndustrySelection" t-on-input="inputIndustrySelection" t-ref="industrySelection"/>
+                    </label>
                     <span> business</span>
                     <span t-att-class="!state.selectedIndustry ? 'o_configurator_hide' : 'o_configurator_show'">,</span>
                 </div>
@@ -72,7 +72,7 @@
                                 <i class="fa fa-angle-down text-black-50 ml-auto pl-2" title="dropdown_angle_down" role="img"/>
                             </a>
                         </div>
-                        <div class="dropdown-menu w-100 border-0 shadow-lg" role="menu">
+                        <div class="dropdown-menu border-0 shadow-lg" role="menu">
                             <t t-foreach="getters.getWebsitePurpose()" t-as="type" t-key="type.name">
                                 <a t-att-title="type.name" t-att-data-id="type.id" t-on-click="selectWebsitePurpose" class="dropdown-item o_change_website_purpose">
                                     <t t-esc="type.label"/>
diff --git a/addons/website/static/src/scss/configurator.scss b/addons/website/static/src/scss/configurator.scss
index ae87b719d15..02fc4009598 100644
--- a/addons/website/static/src/scss/configurator.scss
+++ b/addons/website/static/src/scss/configurator.scss
@@ -84,14 +84,45 @@
                 min-width: 13ch;
             }
 
-            .industry_selection.o_step_todo {
-                min-width: 17ch;
-            }
-
             .o_configurator_purpose_dd.o_step_todo {
                 min-width: 12ch;
             }
 
+            .o_configurator_industry_wrapper {
+                position: relative;
+                display: inline-block;
+                height: $line-height-base * 1em;
+                min-width: 17ch;
+                cursor: pointer;
+
+                input, &::after {
+                    height: $line-height-base * 1em;
+                    font-weight: 500;
+                    font-style: italic;
+                    text-indent: 5px;
+                    padding: 0;
+                }
+
+                input {
+                    position: absolute;
+                    width: 100%;
+                    border: none;
+                    border-bottom: 3px solid theme-color(primary);
+                    color: theme-color(primary);
+
+                    &:focus {
+                        color: inherit;
+                        outline: none;
+                    }
+                }
+
+                &::after {
+                    content: attr(data-value) '|';
+                    display: inline-block;
+                    overflow: hidden;
+                }
+            }
+
             .dropdown {
                 box-shadow: inset 0 -3px 0 theme-color(primary);
 
@@ -121,6 +152,7 @@
             .dropdown-menu, .custom-ui-autocomplete {
                 @include border-bottom-radius($border-radius);
                 font-size: inherit;
+                min-width: 100%;
             }
 
             .dropdown-item, .fa-angle-down, .ui-menu-item a, .ui-menu-item a.ui-state-active {
@@ -128,17 +160,6 @@
                 font-weight: inherit;
             }
 
-            .industry_selection {
-                border: 1px solid $border-color;
-                color: theme-color(primary);
-
-                &:focus {
-                    border-color: theme-color(primary);
-                    color: inherit;
-                    outline: none;
-                }
-            }
-
             .custom-ui-autocomplete {
                 max-height: 300px; // <- Fallback
                 max-height: 35vh;