Unable to remove or add on iphone

[David Margetson]

I am working with the multiple select. On iphone, I am unable to add or remove items from the list. I can debug and find that both "(select)" and "(remove)" are not getting called. 

I want to simply remove the mobile functionality, as it works fine without this if I make the screen width small. I can see that the <div> within <ejs-multiselect> has 2 extra classes - I don't want these, nor any extra added further down.

I just want the desktop functionality regardless of the device

Thanks,

Dave

[UdhayaKumar Duraisamy]

Hello David Margetson,

In order to provide you with the most effective assistance, we would appreciate it if you could share the following additional details:

• The configuration of the MultiSelect component, including the properties used.

• A sample that can be run to demonstrate the issue.

• Comprehensive steps that we can follow to reproduce the issue.

• A video that illustrates the issue.

Best Regards,

Udhaya Kumar D.

[David Margetson]

Hi,

Here is the video of the issue. First I open a dropdown to show that is working. Then I open the multi select and you can see the issue.

https://drive.google.com/file/d/15s8jRdm93ltp7m9BHeatIYIHb9p0T2_k/view?usp=sharing

Steps:

1. Open Multiselect component on Iphone 14 or Iphone 15, Safari 
2. Try to select an option, cannot do so.
3. Try to remove an option, cannot do so.

This is the code. The Value, Select and Remove are used because this is running within a foreach loop: 

<ejs-multiselect id='coachq-{{coachQuestion.Id}}' class="mr-5 mb-2" [dataSource]='coachQuestion.ResponseOptions' [fields]='coachQuestionFields' [popupHeight]='220' [placeholder]='selectText' [value]="getMultiCoachQuestionValue(coachQuestion.Id)" (select)="onSelect($event, coachQuestion.Id)" (removing)="onRemove($event, coachQuestion.Id)"></ejs-multiselect>

getMultiCoachQuestionValue(id: string): string[] {
  const matchingResponseDTOs = this.coachProfileDTO.CoachQuestionResponses.filter(e => e.CoachQuestionId === id);

  if (matchingResponseDTOs.length === 0) {
    return [];
  }

  return matchingResponseDTOs.map(responseDTO => responseDTO.ResponseOptionId).filter(responseId => responseId != null);
}

onSelect(event: any, id: string) {
  const coachResponse = new CoachQuestionResponseDTO(id, event.itemData.Id);
  this.coachProfileDTO.CoachQuestionResponses.push(coachResponse);
}

onRemove(event: any, id: string) {
  const matchingResponseIndex = this.coachProfileDTO.CoachQuestionResponses.findIndex(e => e.ResponseOptionId === event.itemData.Id);
  this.coachProfileDTO.CoachQuestionResponses.splice(matchingResponseIndex, 1);
}

export class ResponseOptionDTO {
  Id: string;
  ResponseText: string;
  Order: number;
  IsSelected: boolean;
}

export class CoachQuestionResponseDTO {
  Id: string;
  CoachQuestionId: string;
  ResponseOptionId: string;
  constructor(coachQuestionId: string, responseOptionId: string) {
    this.CoachQuestionId = coachQuestionId;
    this.ResponseOptionId = responseOptionId;
  }
}

If this is still not enough I'll try put together a demo of the issue. Again - I don't necessarily want a fix, I just want the ability to remove the mobile classes being added as I believe that to be the issue

Thanks,

Dave

[UdhayaKumar Duraisamy]

It appears that you want to remove the 'e-mob-wrapper' and 'e-close-icon-hide' classes from the wrapper div. You can remove these classes in the `created` event of the MultiSelect component. Please refer to the code snippet and sample below for more information:

    <ejs-multiselect

      #sample

      id="multiselect-Id"

      cssClass="mr-5 mb-2"

      [dataSource]="data"

      [fields]="fields"

      [placeholder]="watermarks"

      popupHeight="220px"

      (select)="onSelect($event)"

      (removing)="onRemove($event)"

      (created)="onCreated(sample)"

    ></ejs-multiselect>

  public onCreated(multiObj) {

    multiObj.element

      .querySelector('.e-multi-select-wrapper')

      .classList.remove('e-mob-wrapper');

    multiObj.element

      .querySelector('.e-multi-select-wrapper')

      .classList.remove('e-close-icon-hide');

  }

Sample: https://stackblitz.com/edit/angular-phu4f2-1kavyh?file=src%2Fapp.component.html,src%2Fapp.component.ts