I want to load the login form into the account dropdown in the header.
Therefore I duplicate the default customer login form and loaded it into the dropdown phtml template file using the following;
<?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login")->setTemplate("Magento_Customer::form/login-mini.phtml")->toHtml();?>
This all works perfect, except that it does not login using the enter key. When the e-mail address and password are entered and then the login button is pressed, the login works perfectly. But when the password is entered and the enter key is pressed on the keyboard, it will unfortunately not log in.
How can I change this?
EDIT; We found that the problem is inside the dropdown logic of M2. When we set the dropdown static to display block, so it will not close the dropdown, everything works fine. Is there a way to change the default dropdown login in the customer.phtml
file, that we use to load this form in?
customer.phtml
<div data-block="dropdown" class="customer-welcome loggedout">
<span class="customer-name" data-trigger="trigger">
<i class="fad fa-user hide-on-desktop"></i>
<span class="hide-on-mobile"><?= __('Login')?><i class="fad fa-angle-down"></i></span>
</span>
</div>
<div class="customer-menu" style="display: none;"
data-mage-init='{
"dropdownDialog": {
"appendTo": "[data-block=dropdown]",
"triggerTarget":"[data-trigger=trigger]",
"timeout": 2000,
"closeOnMouseLeave": false,
"closeOnEscape": true,
"triggerClass": "active",
"parentClass": "active",
"buttons": []
}
}'>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"customer": {
"component": "Magento_Customer/js/view/customer"
}
}
}
}
}
</script>
<?php if($block->getChildHtml()):?>
<?= $block->getChildHtml() ?>
<?php endif; ?>
</div>
login-mini.phtml
<div class="block-customer-login">
<div class="block-content" aria-labelledby="block-customer-login-heading">
<form class="form form-login"
action="<?= $block->escapeUrl($block->getPostActionUrl()) ?>"
method="post"
id="login-form"
data-mage-init='{"validation":{}}'>
<?= $block->getBlockHtml('formkey') ?>
<fieldset class="fieldset login">
<div class="field email required">
<label class="label" for="email"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
<div class="control">
<input name="login[username]" value="<?= $block->escapeHtmlAttr($block->getUsername()) ?>" <?php if ($block->isAutocompleteDisabled()) : ?> autocomplete="off"<?php endif; ?> id="email" type="email" class="input-text form-control" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" data-validate="{required:true, 'validate-email':true}">
</div>
</div>
<div class="field password required">
<label for="pass" class="label"><span class="sub-label"><?= $block->escapeHtml(__('Password')) ?></span><a class="action remind" href="<?= $block->escapeUrl($block->getForgotPasswordUrl()) ?>"><span><?= $block->escapeHtml(__('Forgot Your Password?')) ?></span></a></label>
<div class="control">
<input name="login[password]" type="password" <?php if ($block->isAutocompleteDisabled()) : ?> autocomplete="off"<?php endif; ?> class="input-text form-control" id="pass" title="<?= $block->escapeHtmlAttr(__('Password')) ?>" data-validate="{required:true}">
</div>
</div>
<div class="actions-toolbar account-button">
<div class="primary"><button type="submit" class="action login small-button primary" name="send" id="send2"><span><?= $block->escapeHtml(__('Sign In')) ?></span></button></div>
</div>
</fieldset>
</form>
</div>
</div>
Best Answer
I Hope This Helps You.