如何专注于下拉菜单并打开选项？答案

【问题标题】：How to keep focus on dropdown and having option open?如何专注于下拉菜单并打开选项？
【发布时间】：2018-12-07 15:06:51
【问题描述】：

我正在使用这个 multiselect 并且我正在尝试在打开选项的同时将 focus 添加到下拉列表中（请参阅附图以了解我正在尝试什么完成）。

到目前为止，当我单击下拉菜单时，我只看到选项，但下拉菜单的焦点消失了。如何保持专注于下拉菜单以及打开选项？

我正在努力做到这一点：

这是我的代码：

<p-multiSelect [options]="registrationStatus" [defaultLabel]="someText" [showHeader]="false"></p-multiSelect>

LIVE DEMO

【问题讨论】：

所以你的意思是你想要它yellow后台而不是默认blue后台？
@selemmn 我的意思是在下拉菜单上有蓝色焦点边框，并且能够同时从下拉菜单中选择一个选项，就像我在我的图像上一样。谢谢
你只是想要焦点样式还是真正的焦点？
我不太明白，因为默认行为中已经有一个蓝色边框，并且在重新打开下拉菜单时它不会消失。我的意思是，你想用黄色切换蓝色吗？这就是你想说的。对不起..
@selemmn 在我的图像中我通过打开选项并以某种方式单击下拉菜单并关注下拉菜单来强制它成为焦点。我想要的是单击下拉菜单，然后下拉菜单应该同时获得焦点。希望这是有道理的:)。谢谢

标签： angular primeng

【解决方案1】：

ngAfterViewInit() {
  this.elem = (document.querySelector('.ui-multiselect') as any);
  this.elem.setAttribute('tabindex', -1);
}

演示 https://stackblitz.com/edit/primeng-input-multiselect-nvwonk

您可以添加键盘事件等。

【讨论】：

如何消除对模糊的关注？谢谢
为@HostListener('document:click')注册一个回调，并调用blur。
你能更新你的答案吗？谢谢
p-multiSelect 有 onBlur 事件??
stackblitz.com/edit/primeng-input-multiselect-mwcmg3 隐藏下拉列表的小问题，但应该很容易修复:)

【解决方案2】：

overlayVisible 987654323 @组件将在选项面板可见或隐藏时给出一个真/假值，或隐藏

模板

<p-multiSelect [options]="registrationStatus" 
               [defaultLabel]="someText" [showHeader]="false" 
               #p [ngClass]="{'focus':p.overlayVisible}">
</p-multiSelect>

style.css

.focus  .ui-dropdown, .focus  .ui-multiselect {
    -moz-box-shadow: 0px 0px 5px #1f89ce;
    -webkit-box-shadow: 0px 0px 5px #1f89ce;
    box-shadow: 0px 0px 5px #1f89ce;
}

这个组件有一些像onChange , onFocus , onBlur , onPanelShow , onPanelHide这样的事件，会根据一组动作触发一些事件，所以你可以在这个组件失去焦点后触发一些事件，比如 blur 或 onPanelHide（按 Tab）

stackblitz demo

【讨论】：

查看演示 ??
您的回答无效。你只是在设计它。我实际上希望它集中，这样我就可以使用 (key.enter) 并进行 API 调用。
你有什么不对这些是onChange , onFocus , onBlur , onPanelShow , onPanelHide的事件列表，所以按键是不可能的，也许onPanelHide对你的情况有好处
primeng 7 - key.enter on option the for select ?? 希望这会有所帮助