DropDown Open Issue

[Nagendra Gupta]

Dear Team,

We are using ejs-dropdownlist and it is working perfectly but first time it open by double click. After that it is open on single click.

Our requirement is every time it open by single click.

Please see below code which we are using.

<ejs-dropdownlist #cmbObj

[fields]='cmbFields'

[enabled]='!control?.IsReadOnly'

formControlName="{{control?.FieldName}}"

[query]='query'

        [dataSource]='dataManager'

(actionFailure)='onActionFailure($event)'

(actionComplete)='onActionComplete($event)'

        (actionBegin)='onActionBegin($event)'

(beforeOpen)='onBeforeOpen($event)'

(open)='onOpen($event)'

        (filtering)='onFiltering($event)'

(select)='onSelect($event);'

(close)='onClose($event)'

        (focus)='onFocus($event)'

(change)='onChange($event, control,cmbObj)'

(blur)='onBlur($event, cmbObj, control)'

        (mousedown)='onMouseDown($event)'

floatLabelType='Auto'

[filterBarPlaceholder]='filterPlaceholder'

        [popupHeight]='height'

[allowFiltering]='true'

cssClass='e-outline mobile-autocomplete-new'

        [itemTemplate]='itemTemplate'>

        <ng-template #itemTemplate="" let-data>

            <div class="sorder-dropdown autocomplete-online-box {{page.PageCode}}" id="target">

                <div *ngIf="control.AutoCompleteModel.Columns!=null" class="row ml-0 mr-0">

                    <div *ngFor="let col of control.AutoCompleteModel.Columns; let i = index"

                        class="width{{col.Width}} overflow-hidden autobox pl-1 pr-1" style="overflow: hidden;"

                        title="{{data[col.FieldName]}}">

                        <span *ngIf="col.ColumnTypes=='TEXT'">

                            {{data[col.FieldName]}}

                        </span>

                        <span *ngIf="col.ColumnTypes=='DATE'">

                            {{transformDate(data,col)}}

                        </span>

                    </div>

                </div>

            </div>

            <div *ngIf="control.AutoCompleteModel.Columns==null" class="dropdown-rowtemplate column-text-indent">

                {{data[control.AutoCompleteModel.TextColumn]}}

            </div>

        </ng-template>

        <ng-template *ngIf="control.AutoCompleteModel.Columns!=null" #headerTemplate="" let-data="">

            <div class="sorder-dropdown">

                <div class="pl-1 dropdown-bg-main" style="padding-right: 19px;">

                    <div class="row ml-0 mr-0 autocomplete-online-box" style="height: 30px;">

                        <div *ngFor="let d of control.AutoCompleteModel.Columns"

                            class="width{{d.Width}} columnfirst pl-0 pr-1 dropdown-bg">

                            {{d['HeaderText']}}

                        </div>

                    </div>

                </div>

            </div>

        </ng-template>

    </ejs-dropdownlist>

[UdhayaKumar Duraisamy]

Hi Nagendra,

We have validated the reported query on our end. Unfortunately, we couldn’t reproduce the reported issue as per your scenario. We have attached a sample for reference. Also, we request you to provide additional details about the issue as mentioned below, This will help us validate the issue further and provide you with a better solution.

1. Are you facing the issue in any particular scenario?

2. Is the DropdownList component rendered within any other component or alone?

3. Simple Issue reproducing runnable sample (or modify the shared sample).

4. Issue replication steps.

5. Video illustration of the issue.

Sample : https://stackblitz.com/edit/angular-xkfs8i?file=app.component.ts,app.component.html

Regards,

Udhaya Kumar D

[Nagendra Gupta]

Dear Udhaya Kumar D,

1. Are you facing the issue in any particular scenario?

 I am facing this problem in mobile mode in web its working fine.

2. Is the DropdownList component rendered within any other component or alone?​

Other component.

Regards

Nagendra

 

[Mohanraj Mathaiyan]

Hi Nagendra,

Thanks for your update. We have checked and created samples based on your shared code. But we were unable to replicate your problem at our end. Please see the below video for your reference.

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DropdownList1951279593

Can you please share mobile device information, and which other components are used at your end with a video demo for your reported issue? It will be helpful to replicate your issue at our end.

Regards,

Mohanraj M

[Nagendra Gupta]

Hi Mohanraj Mathaiyan,

The issue has been solved.

Regards,

Nagendra Gupta

[UdhayaKumar Duraisamy]

Hi Nagendra,

We are glad that your requirement has been fulfilled on your end. We are always happy to assist you.

Regards,

Udhaya Kumar D