event click in item listview processced same hover first time in web Ipad

[MessxayQuang]

I'm facing an issue when using the select event on a ListView. It works well on all devices, but when I use it in browsers on an iPad, it behaves like a hover on the first tap when selecting an item.

[Vishwanathan Muruganantham]

Hi MessxayQuang,

Greetings from Syncfusion support.

We have reviewed your query and understand that the hover style is being applied on the iPad when clicking a list item while the select event is bound. We have prepared a sample based on the details you provided but were unable to replicate the issue. For your reference, we have attached the sample. If the issue still persists, please share the complete code details and a video demonstrating the issue. If possible, try to replicate the issue using the provided sample.

Sample: https://stackblitz.com/edit/angular-ghxjxu-m3mitw?file=src%2Findex.html

Best Regards,
Vishwanathan

[MessxayQuang]

Hi  Vishwanathan,

I have tried but it still doesn't work. Below is my code snippet:

   <ejs-listview

        *ngSwitchCase="'listView'"

        #listview

        [dataSource]="dataService.data"

        [headerTitle]="title"

        cssClass="e-list-template border-0"

        class="h-100"

        [showHeader]="title != ''"

        (actionComplete)="actionComplete($event)"

        (select)="listViewSelect($event)"

        [fields]="fields"

        (scroll)="onScroll($event)"

        [enableVirtualization]="false"

        [showCheckBox]="showCheckBox"

        [checkBoxPosition]="'Right'"

      >

        <ng-template #template let-dataItem let-index="i">

          <ng-container *ngIf="isMulti">

            <span class="list-check-select position-absolute">

              <input

                name="checkbox"

                type="checkbox"

                [checked]="dataItem._isSelect"

                (change)="selectMulti($event, dataItem)"

              />

            </span>

          </ng-container>

          <div

            class="has-action-menu"

            [attr.data-id]="dataItem[groupBy]"

            [attr.data-_uid]="dataItem[dataService.idField]"

            (dblclick)="doubleClick(dataItem)"

          >

            <ng-container

              *ngTemplateOutlet="

                itemTemplate;

                context: { $implicit: setDataIndex(dataItem), index: index }

              "

            >

            </ng-container>

          </div>

        </ng-template>

        <ng-template #groupTemplate let-dataSource="">

          <div

            class="e-list-wrapper item-group"

            (click)="ClickGroup($event, dataSource)"

            *ngIf="gTemplate; else group"

          >

            <ng-container

              *ngTemplateOutlet="gTemplate; context: { $implicit: dataSource }"

            >

            </ng-container>

          </div>

          <ng-template #group>

            <span

              class="e-list-item-content"

              [innerHTML]="

                dataSource.items[0][groupBy]

                  | formatvalue

                    : formModel

                    : groupBy

                    : null

                    : formName

                    : gridViewName

                  | async

              "

            ></span>

          </ng-template>

       

        </ng-template>

      </ejs-listview>

Attachment: 8669791048102909888_d9fca51e.7z

[Vishwanathan Muruganantham]

Hi MessxayQuang,

We have reviewed your code and prepared a sample similar to it. However, we did not face any issues when clicking the node. We suspect that your custom code in the Select event might be causing the issue. Could you please share the custom code you used in the Select event along with your browser details? This will help us provide a prompt and accurate solution.

Sample: https://stackblitz.com/edit/angular-zcminv-hfhutv?file=src%2Fapp.component.ts

Best Regards,
Vishwanathan

[MessxayQuang]

Hi  Vishwanathan Muruganantham,

I have attached my custom code in a 7z file. Please help me troubleshoot this issue. The problem only occurs when performing the functionality on an actual iPad device(ver: 17.7.2). If I open the website on a PC and switch to iPad mode, the issue does not occur.

Attachment: codxlistview.component.ts_8037c59d.7z

[Vishwanathan Muruganantham]

Hi MessxayQuang,

Thanks for your update. We have prepared the sample with your shared code and tested it on a real iPad device. We were unable to replicate the issue; the select event triggers properly on the first click itself.

We suspect that your setTimeout and the if condition to trigger your component event (onSelectionChanged) might be failing to trigger the event. Please ensure that the condition allows you to trigger that event. If the issue still persists, please share a video confirming that the listViewSelect method, which is bound to the select event, is not triggered on the first click. This detail will help us provide a prompt solution.

We have attached a sample video for your reference.

Suspected code:

  …

 

listViewSelect(evt: any) {

    if (evt.event && evt.event.key) {

      if (this.selectTimeout) clearTimeout(this.selectTimeout);

      this.selectTimeout = setTimeout(() => {

        var data = evt.data;

        if (data) this.itemClick(data);

      }, 3000);

    } else {

      var data = evt.data;

      if (!data) data = this.dataService.data[evt.index];

      if (data) this.itemClick(data);

    }

  }

…

 

  itemClick(item: any) {

    let f = this.dataService.data.find(

      (x) => x[this.dataService.idField] == item[this.dataService.idField]

    );

    if (!f) return;

    this.dataService.dataSelected = item;

    this.onSelectionChanged.emit({ data: item });

  }

 

Sample and video: Attached as zip file.

Please check the sample and let us know if you need any further assistance.

Best Regards,
Vishwanathan

Attachment: Listview_90fdb83f.zip