MAUI Blazor Hybrid应用输入框覆盖汉堡按钮问题求助

问题描述 #

构建MAUI Blazor Hybrid应用时，添加To-Dos导航项后出现以下异常：

• 宽屏Windows环境下，左侧导航栏正常显示Home、Counter、Weather、To-Dos共4个选项
• Android模拟器/真机、窄屏Windows环境下，汉堡按钮上方出现带白色文字的透明输入框，点击该区域会弹出键盘，无法打开导航菜单

问题定位 #

查看Components\Layout\NavMenu.razor文件中的导航按钮代码，发现<input>标签存在语法错误：多余的无效字符串错误插入到属性定义中，导致原本作为汉堡按钮的checkbox控件被解析为文本输入框。

错误代码片段：

<input https://0.0.0.0/countertype="checkbox" title="Navigation menu" class="navbar-toggler" />

修复方案 #

将错误的<input>标签修正为正确的checkbox控件，移除多余的无效字符串：

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

验证效果 #

修正代码后，移动端和窄屏Windows环境下的汉堡按钮功能恢复正常，点击可弹出包含全部4个导航项的菜单，异常输入框不再出现。

内容的提问来源于stack exchange，提问作者Eric Eggers