[FIX] web: phone,email,selection fields show helpers on hover

Only on devices not handling touch.

Before this commit, the phone, email, and selection fields always displayed
their field as in edit mode, even if not hovered.

eg. The envelope button of the email field, the SMS and call button of the phone field
and the caret of the selection field where always visible.

Since the form is always in edition, it doesn't make sense to always display those elements.

This commit makes those element display only on hover and on focus.

closes odoo/odoo#102489

X-original-commit: f87aa36f42fc190285241aeb8e1a4d9ab1644989
Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>

addons/web/static/src/views/fields/fields.scss

@@ -48,3 +48,23 @@
 .o_kanban_quick_create .o_field_widget .o_input {
     border-color: var(--o-input-border-color);
 }
+
+body:not(.o_touch_device) .o_field_widget {
+    // Phone, Email
+    &.o_field_phone, &.o_field_email {
+        &:not(:hover):not(:focus-within) {
+            & input:not(:hover) ~ a {
+                display: none !important;
+            }
+        }
+    }
+
+    // Selection
+    &.o_field_selection {
+        &:not(:hover):not(:focus-within) {
+            & select:not(:hover) {
+                background: none !important;
+            }
+        }
+    }
+}

addons/web/static/src/views/fields/selection/selection_field.xml

@@ -6,7 +6,7 @@
             <span t-esc="string" t-att-raw-value="value" />
         </t>
         <t t-else="">
-            <select class="o_input" t-on-change="onChange">
+            <select class="o_input" t-on-change="onChange" t-att-id="props.id">
                 <option
                     t-att-selected="false === value"
                     t-att-value="stringify(false)"