输入焦点从键盘输入更改为非键盘输入后,如何使离子选择弹出框正确呈现?

时间:2019-12-20 17:29:10

标签: javascript ionic-framework select keyboard ionic3

(离子3)

在我的component HTML中,我有一个select box (ion-select),其中显示了一些选项。

<ion-content padding>
  <form [formGroup]="p" (ngSubmit)="submit()">
    <ion-item>
      <ion-label floating>{{"somePage.bId"|translate}}</ion-label>
      <ion-input type="tel" formControlName="pId"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>{{"somePage.defect"|translate}}</ion-label>
      <ion-select formControlName="error" interface="popover">
        <ion-option *ngFor="let option of options" [value]="option.error">{{option.description}}</ion-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-label floating>{{"message"|translate}}</ion-label>
      <ion-textarea
        rows="13"
        formControlName="message"
        autocorrect="on"
        autocomplete="on">
      </ion-textarea>
    </ion-item>
    <button *ngIf="!..." ion-button type="submit" [disabled]="...">{{"submit"|translate}}</button>
  </form>
</ion-content>

当第一件事是用户selects is the select box时,它会打开并且可以可滚动enter image description here

但是如果有人会select number input first,那么keyboard会打开。输入numbertapping the select box后,它会打开,但不能滚动,并且溢出屏幕。

enter image description here

很明显,popover在较小的屏幕上计算得较大,直到键盘覆盖导致更高的窗口高度,以下log显示为{{1 }}。

enter image description here

(第二行显示越野车的情况)

我正在使用当前的(*Height* being the select box height, and window height is self-explanatory)

是否有任何解决方法/解决方案,所以ionic-angular version 3.9.9.正确吗?

0 个答案:

没有答案