如何保持专注于下拉菜单并打开选项？

Question

我正在使用此 multiselect ，并且我尝试在打开选项的同时对下拉列表添加 focus （请查看所附图片以查看我正在尝试的内容完成）。

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

我正在努力做到这一点：

这是我的代码：

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

LIVE DEMO

Answer 1

当选项面板可见或隐藏时，overlayVisible组件的

p-multiSelect属性将提供true / false值

模板

<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之类的事件

stackblitz demo

Answer 2

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

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

您可以添加键盘事件等。