I am trying to change the telephone input type from “text” to “tel”, so that on mobile devices a number pad will display. I have tried to implement the solution outlined https://magento.stackexchange.com/a/337363/56479, but I am not able to get it to work.
Am I missing something?
/app/code/Vendor/Module/etc/frontend/di.xml
I’ve tried putting the di.xml file in just the “etc” folder, but that also did not seem to make a difference.
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="MagentoCheckoutBlockCheckoutLayoutProcessor">
<plugin name="update_billing_telephone" type="VendorModulePluginBlockCheckoutLayoutProcessor"/>
</type>
</config>
/app/code/Vendor/Module/Plugin/Block/Checkout/LayoutProcessor.php
namespace VendorModulePluginBlockCheckout;
class LayoutProcessor
{
/**
* @param MagentoCheckoutBlockCheckoutLayoutProcessor $subject
* @param array $jsLayout
* @return array
*/
public function afterProcess(MagentoCheckoutBlockCheckoutLayoutProcessor $subject, $result, $jsLayout)
{
$result["components"]["checkout"]["children"]["steps"]["children"]["billing-step"]["children"]["payment"]
["children"]["afterMethods"]["children"]["billing-address-form"]["children"]["form-fields"]["children"]
["telephone"]['config']['elementTmpl'] = 'Vendor_Module/form/element/tel-input';
return $result;
}
}
I’ve tried putting the tel-input.html file in both base and frontend, but neither seem to make a difference.
/app/code/Vendor/Module/view/frontend/web/template/form/element/tel-input.html
<input class="input-text" type="tel" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': getDescriptionId(),
'aria-required': required,
'aria-invalid': error() ? true : 'false',
id: uid,
disabled: disabled
}" />