Angular p-drowdown view list when editable without having to click down arrow or enter key

24 Views Asked by At

I have an p-dropdown control on my page.

<div class="form-group">
                <p-dropdown
                  #dd
                  placeholder="Enter First Name, Last Name, Email address or contact number"
                  [style]="{ width: '100%' }"
                  scrollHeight="175px"
                 
                  resetFilterOnHide="true"
                  panelStyleClass="dropdownOverride"
                  [options]="dropdownUserList"
                  (input)="lazyLoadFilterData($event)"
                  class="custom-dropdown custom-input bg-white"
                  appendTo="body"
                  (onChange)="onUserSelected($event)"
                  editable="true"
                  autoWidth="false" 
                  
                ></p-dropdown>
              </div>

When the list is not editable, as soon as I click on the "textbox" area of the dropdown, the list of available items is displayed. But once editable is set to true, users have to click on the down arrow in order to make the available list visible. How can I make the available list visible even if the list is editable?

I have tried various settings to no avail.

0

There are 0 best solutions below