Can't focus on Input Element created using headerTemplate in ejs-multiselect

[bhavyasf]

Hi there, I was using syncfusion multiselect component in Angular. In the dropdown using #headerTemplate, I was adding a new input for searching purposes(I want to keep search seperate from selected values in the input), however, I was unable to focus on the input in the headerTemplate. Does anybody knows what is the underlying issue behind it? the code and the SS is given below app.component.html

    <div class="col-lg-9  content-wrapper" style="height: 350px">
        <div style="margin: 0px auto; width:450px; padding-top: 40px;">
            <h4>MultiSelect DropDown</h4>
            <ejs-multiselect id='sample-list1' [dataSource]='sportsData'  [fields]='fields' [placeholder]='waterMark' [value]="value"
            [mode]='mode' (open)='onOpen()' #multiselect >
                  <ng-template #headerTemplate="" let-data="">
                     <input type='text'/>
                  </ng-template>
            </ejs-multiselect>
            </div>
        </div>
</div>

app.component.ts

import { MultiSelectComponent, CheckBoxSelectionService } from '@syncfusion/ej2-angular-dropdowns';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None,
    providers: [CheckBoxSelectionService]
})
export class AppComponent {
    // define the JSON of data
    public sportsData: Object[] = [
        { Id: 'Game1', Game: 'American Football' },
        { Id: 'Game2', Game: 'Badminton' },
        { Id: 'Game3', Game: 'Basketball' },
        { Id: 'Game4', Game: 'Cricket' },
        { Id: 'Game5', Game: 'Football' },
        { Id: 'Game6', Game: 'Golf' },
        { Id: 'Game7', Game: 'Hockey' },
        { Id: 'Game8', Game: 'Rugby' },
        { Id: 'Game9', Game: 'Snooker' },
        { Id: 'Game10', Game: 'Tennis' }
    ];
    // maps the appropriate column to fields property
    public fields: Object = { text: 'Game', value: 'Id' };
    // set the placeholder to MultiSelect input element
    public waterMark: string = 'Favorite Sports';    
    // set the type of mode for how to visualized the selected items in input element.
    public value: string[] = ["Game1", "Game2"];
    public mode = 'Default';
    @ViewChild('multiselect', null) multiSelect;
}

app.component.css

#multiselect-diacritics.control-section{
    width: 80%;
    margin: 0 auto;
    min-width: 185px;
}

.e-bigger #multiselect-diacritics.control-section {
    width: 100%;
}

you can see the input box in the top of the dropdown which I was unable to focus at all!

[BerlyChristopher]

Hi Bhavyasf,

Greetings from Syncfusion support.

By default, when opening the popup the focus will be retained in the parent element. Due to this, we could not focus the textbox element. So, we can achieve the requested requirement by focus the input text in the open event arguments.

public onOpen(args) {
    this.multiSelect.focusOut();
    setTimeout(() => {
      document.getElementById('inputNative').focus();
    }, 10);
  }
  public onSelect(args) {
    this.multiSelect.focusIn();
  }

Sample: https://stackblitz.com/edit/angular-skpmdn-uycc8k?file=app.component.ts

Regards, Berly B.C

[bhavyasf]

Thanks a lot @BerlyChristopher! Also I want to add that can we customize the template where values are stored ? Like we have 6 selected items, 3 we have shown in the input and rest of them we can show as + 3 more and by clicking on +3, we can open a small dropdown that we have remaining tags ?

[BerlyChristopher]

Hi Bhavyasf,

We checked your query. We request that you to use the Box mode for your requirement. Please refer the following sample.

Sample link: https://stackblitz.com/edit/angular-skpmdn-9vbj6h?file=app.component.ts

Regards, Berly B.C

[gsumankumar]

We are closing this issue since there is no recent activity. Feel free to reopen this and update your comments for the reinvestigation.