[FIX] web: PhoneField: set correct type on input

"phone" isn't a valid input type, so it had no effect, except
breaking the tour system when a PhoneField input was the target
of a step, since the "consume event" was then "click" instead of
"input"..

closes odoo/odoo#100388

Related: odoo/enterprise#31437
Signed-off-by: Pierre Paridans (app) <app@odoo.com>

addons/web/static/src/views/fields/phone/phone_field.xml

@@ -9,7 +9,7 @@
             <input
                 class="o_input"
                 t-att-id="props.id"
-                type="phone"
+                type="tel"
                 t-att-placeholder="props.placeholder"
                 t-ref="input"
             />

addons/web/static/tests/helpers/utils.js

@@ -437,7 +437,11 @@ export async function editInput(el, selector, value) {
     if (!(input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement)) {
         throw new Error("Only 'input' and 'textarea' elements can be edited with 'editInput'.");
     }
-    if (!["text", "textarea", "email", "search", "color", "number", "file"].includes(input.type)) {
+    if (
+        !["text", "textarea", "email", "search", "color", "number", "file", "tel"].includes(
+            input.type
+        )
+    ) {
         throw new Error(`Type "${input.type}" not supported by 'editInput'.`);
     }
 

addons/web/static/tests/views/fields/phone_field_tests.js

@@ -60,17 +60,17 @@ QUnit.module("Fields", (hooks) => {
         await click(target.querySelector(".o_form_button_edit"));
         assert.containsOnce(
             target,
-            'input[type="phone"]',
+            'input[type="tel"]',
             "should have an input for the phone field"
         );
         assert.strictEqual(
-            target.querySelector('input[type="phone"]').value,
+            target.querySelector('input[type="tel"]').value,
             "yop",
             "input should contain field value in edit mode"
         );
 
         // change value in edit mode
-        await editInput(target, "input[type='phone']", "new");
+        await editInput(target, "input[type='tel']", "new");
 
         // save
         await click(target.querySelector(".o_form_button_save"));