CODEWITHSUNDEEP
angularprimeng
Devmix
Devmix

Reputation: 1868

How to keep focus on dropdown and having option open?

I'm working with this multiselect and I'm trying to add focus on dropdown while having options open (please see attached picture to see what I'm trying to accomplish).

So far when I click on dropdown I only see the options but the focus from dropdown goes away. How can I keep focus on dropdown as well as having options open?

I'm trying to accomplish this:

enter image description here

Here's my code:

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

LIVE DEMO

Upvotes: 1

Views: 5438

Answers (2)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

overlayVisible property of p-multiSelect component will give a true/false value when the option panel is visable or hidden

template 

<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;
}

this component has some event like onChange , onFocus , onBlur , onPanelShow , onPanelHide will trige base on set of action so you can trigger some event like blur , or onPanelHide after this componnt lost focus (press tab)

stackblitz demo

Upvotes: 1

ABOS
ABOS

Reputation: 3823

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

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

you can add keyboard event etc.

Upvotes: 1

Related Questions