0

I have a dropdown in a table setup. So, every row has different id and thus it is more like a dynamic multiselect dropdown. I want to implement the feature of autofocus so as soon as I click on the dropdown - the cursor should appear in the search box which comes in the multiselect dropdown.

I have tried some things like external CSS and adding some ts functions but all in vain.

The HTML code (Here this is just one multiselect inside a ngFor ):

<ng-container matColumnDef="BPlace">
   <th mat-header-cell *matHeaderCellDef mat-sort-header
      style="width:180px;"> Business Place </th>
   <td mat-cell *matCellDef="let row" style="width:200px;">
     
      <ng-multiselect-dropdown [placeholder]="'Select BPlace'"
      [data]="row.BPlaceList" name="BPlace"
      id="{{'BPlace_'+ row.ID}}"
      [(ngModel)]="row.BPlaceSel"
      [settings]="DropDowns.BPlaceSettings" class=""
      (onSelect)="onSel($event,row ,'BPlace');"
      (click)="tab(item,row,'BPlaceList');showOffset('BPlace_'+ row.ID);">
      </ng-multiselect-dropdown>

   </td>
   <td mat-footer-cell *matFooterCellDef></td>
</ng-container>

The TS code:

this.BPlaceSettings= {
      singleSelection: true,
      idField: 'Code',
      textField: 'CodeLoc',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 1,
      allowSearchFilter: true
    };

What I tried (This works for CSS change but I was unable to use any autofocus attribute):

onClick()
{
$(".multiselect-dropdown[_ngcontent-c5] .dropdown-list[_ngcontent-c5] .item1[_ngcontent-c5] .filter-textbox[_ngcontent-c5] input ").css({"color":"white"}); // This Works
}

Thanks in Advance. Regards

Exception
  • 571
  • 1
  • 3
  • 15
SAM SAMULE
  • 35
  • 1
  • 4
  • If `ng-multiselect-dropdown` implements a `focus()` method, then you could use some AutofocusDirective like [this one](https://github.com/MintPlayer/mintplayer-ng-bootstrap/blob/master/libs/mintplayer-ng-focus-on-load/src/lib/directives/focus-on-load/focus-on-load.directive.ts) ([demo](https://bootstrap.mintplayer.com/overlays/modals)) – Pieterjan Sep 23 '22 at 12:31

0 Answers0