防止在Materialize CSS菜单中按Tab时关闭下拉列表

Question

一般信息使用下拉触发器在带有集成注册/登录表单的菜单上进行操作。

问题矩阵CSS的默认选项是禁用自动关闭菜单：closeOnClick: false。这工作得很好。问题在于，当按下Tab键时，它仍然关闭菜单。许多用户（包括我在内）都可以按Tab键快速浏览Web表单。所以我试图防止这种情况。

我尝试过的解决方案遵循与这个紧密相关的问题中的建议：Prevent materializecss dropdown to close when clicking inside it我已经尝试了与keydown，keyup和keypress事件类似的操作。没有任何影响：

$('.dropdown-button + .dropdown-content').on('keyup', function(event) {
    event.stopPropagation();
});

可接受的解决方案使用html，css，javascript和/或jQuery的解决方案是可接受的。

MCVE单击下拉列表可以正常工作。按Tab键，它将关闭菜单。

$(document).ready(function(){
  $(".dropdown-trigger").dropdown({
	  alignment: 'left',
	  constrainWidth: false,
	  coverTrigger: false,
	  closeOnClick: false,
	  hover: false
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<ul id="usermenu" class="dropdown-content dropdown-menu">
	<li>
		<div class="row no-bottom">
			<div id="login" class="col s12">
				<form id="form-login">
					<div class="row">
						<div class="col s12">
							<label>Username</label>
							<input type="text" class="browser-default form-input" placeholder="Username" id="username"/>
						</div>
					</div>
					<div class="row no-bottom">
						<div class="col s12">
							<label>Password</label>
							<input type="password" class="browser-default form-input" placeholder="Password" id="password"/>
						</div>
					</div>
				</form>
			</div>
		</div>
	</li>
</ul>
<nav class="nav-center grey darken-3">
	<div class="nav-wrapper">
		<a href="#" data-target="mobile-menu" class="sidenav-trigger hide-on-med-and-up"><i class="material-icons">menu</i></a>
		<ul id="nav-mobile" class="hide-on-small-only">
			<li><a class="dropdown-trigger" href="#" data-target="usermenu">Login<i class="material-icons right">arrow_drop_down</i></a></li>
		</ul>
	</div>
</nav>

Answer 1

我没有意识到event.stopPropagation();不会阻止同一元素上的其他处理程序运行。之后，解决方案非常简单：

$('#form-login').on('keydown', function(event) {
    event.stopPropagation();
});