Filter text box not selectable or typeable

Select pickers & dropdowns
,
1

When I open the select box, I am able to select items, but the filter box is not selectable and doesn’t seem to accept any input. Happy to post more code or whatever.

Thank you.

filterSettings: MbscSelectOptions = { display: 'bubble', touchUi: false, select: 'multiple' };

<mbsc-select class="mbsc-no-padding" label-style="stacked" input-style="outline" formControlName="contacts" [data]="contacts" [options]="filterSettings">

2

Could you please provide some extra details?
Which mobiscroll version are you using? Is this happening everywhere, or only on specific platforms, like iPhone? Is it inside a native app or web app?

3

Thanks for responding. We are using Angular 7.2.10 with Ionic 4.2.0 and Mobiscroll 4.6.3, but only as a desktop app for right now. Happens with both Chrome and Firefox current browsers. Everything looks like it is rendering properly but Type to filter doesn’t accept focus. This is all happening within an Ionic Modal popup window.

image
image1190×1204 34.3 KB

Here’s the entire form:

<ion-content>
  <ion-grid>
    <mbsc-form>
      <form [formGroup]="form">
        <mbsc-textarea label-style="stacked" input-style="outline" formControlName="comment">{{ 'mediaPage.request' | translate }}</mbsc-textarea>
        <mbsc-select class="mbsc-no-padding" label-style="stacked" input-style="outline" formControlName="contacts" [data]="contacts" [options]="filterSettings">
          {{ 'contactsPage.contacts' | translate }}
        </mbsc-select>
        <ion-text no-padding color="primary" (click)="createNewContact()">
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<fa-icon [title]="'contactsPage.createNewContact' | translate" [icon]="['fal', 'plus']"></fa-icon>
            {{ 'contactsPage.createNewContact' | translate }}
          </p>
        </ion-text>
        <mbsc-select label-style="stacked" input-style="outline" formControlName="assignedTo" [data]="users" [options]="desktopSettings">
          {{ 'mediaPage.assignTo' | translate }}
        </mbsc-select>
        <mbsc-select label-style="stacked" input-style="outline" formControlName="tags" [data]="tags" [options]="selectSettings">
          {{ 'settingsMenu.tags' | translate }}
        </mbsc-select>
        <mbsc-datetime label-style="stacked" input-style="outline" formControlName="deadline" [options]="desktopSettings" dateFormat="d MM yy">
          {{ 'assignmentsPage.chooseDeadline' | translate }}
        </mbsc-datetime>
        <ion-chip *ngFor="let attachment of form.value.attachments; let index = index" outline="true" color="primary">
          <ion-icon name="document"></ion-icon>
          <ion-label>{{ attachment.name }}</ion-label>
          <ion-icon name="close" (click)="deleteAttachment(index)"></ion-icon>
        </ion-chip>
        <attachment-upload [basePath]="auth.orgPath + '/cases/' + mediacase.docId + '/attachments/'" [text]="'mediaPage.uploadAttachment'"
          (storageReference)="onUploaded($event)"></attachment-upload>
        <mbsc-textarea label-style="stacked" input-style="outline" formControlName="response">{{ 'mediaPage.response' | translate }}
        </mbsc-textarea>
      </form>
    </mbsc-form>
  </ion-grid>
</ion-content>
4

Thanks for the details, it helps a lot!

The problem is actually the Ionic Modal - since it’s a modal, it does not allow focus outside of it. Since the Mobiscroll picker is appended to the body element by default, the filter input is outside of the Ionic Modal, and focusing is prevented.

To solve this, you can use the context setting of the Mobiscroll Select, this way the picker will be opened inside the modal, and focus will work.

To do this, you will also need an id on the ion-content element of the modal:

<ion-content id="my-modal">
  ...
</ion-content>

selectSettings: MbscSelectOptions = {
  context: '#my-modal',
  // ...
}
5

That worked great! Thank you very much. :heart_eyes: