[BUG] Bottomsheet blank when keyboard appears

GosuMania commented 3 years ago

Hi, i add un ion-input and a ion-searchbar to my cupertinopane, but when open the keyboard, it becomes completely blank.

Check video: https://user-images.githubusercontent.com/63244629/126185803-2832ac4e-6038-4497-bb43-228301f1ae63.mp4

Html:

  <div class="paneAggiungiFavoritesList">
    <ion-grid style="margin-left: 3%; margin-right: 3%;">
      <ion-row>
        <ion-col>
          <h4 style="color:#092875">
            Aggiungi un prodotto alla lista preferiti
          </h4>
        </ion-col>
      </ion-row>
      <ion-row style="align-items: center; background-color: #F4F4F4; border-radius: 15px;">  
        <ion-searchbar class="noShadow" #mySearchbar placeholder="Cerca su Amazon" (search)="searchProduct($event.target.value)"
          color="#F4F4F4" style="background-color: #F4F4F4; border-radius: 15px; width: 81%;">
        </ion-searchbar>
        <ion-button class="noShadow camera" (click)="startScanner()">
          <ion-icon  slot="icon-only" name="camera-outline"></ion-icon>
        </ion-button>
      </ion-row>
      <br>
      <ion-row style="align-items: center; background-color: #F4F4F4; border-radius: 15px;">
        <ion-col>
          <ion-input  [(ngModel)]="productLink" placeholder="Incolla il link del prodotto"></ion-input>
        </ion-col>
      </ion-row>
      <br>
      <ion-row>
        <ion-col>
          Appena il prodotto sara’ in offerta, riceverai una notifica!
        </ion-col>
      </ion-row>
      <br>
      <div>
        <ion-row>
          <ion-col style="padding-right: 0px; padding-left: 0px;">
            <ion-button class="noShadow"  color="newmania" expand="block" style="width: 100% !important; opacity: 0;">
              Aggiungi
            </ion-button>
          </ion-col>
        </ion-row>
      </div>
    </ion-grid>
    <div class="footer">
      <ion-row>
        <ion-col style="padding-right: 0px; padding-left: 0px;">
          <ion-button class="noShadow"  (click)="closePaneAggiungiFavoritesList()" color="newmania" expand="block"
            style="width: 100% !important;">
            Aggiungi
          </ion-button>
        </ion-col>
      </ion-row>
    </div>
  </div>

CSS:

.paneAggiungiFavoritesList {
  display: none;
}

TS:

  async openPaneAggiungiFavoritesList() {
    let settings: CupertinoSettings = {
      parentElement: 'body',
      fitHeight: true,
      bottomClose: true,
      buttonDestroy: false,
      backdrop: true,
      onWillDismiss: () => {
      }
    };
    this.paneAggiungiFavoritesList = new CupertinoPane('.paneAggiungiFavoritesList', settings);
    await this.paneAggiungiFavoritesList.present({ animate: true });
  }

Can it be solved? Many thanks in advance

GosuMania commented 3 years ago

i fix with it :

    this.keyboard.onKeyboardDidShow().subscribe(() => {
      if (this.paneAggiungiFavoritesList.isHidden()) {
        this.paneAggiungiFavoritesList.hide();
        this.paneAggiungiFavoritesList.present();
      }
    });

    this.keyboard.onKeyboardDidHide().subscribe(() => {
      if (this.paneAggiungiFavoritesList.isHidden()) {
        this.paneAggiungiFavoritesList.hide();
        this.paneAggiungiFavoritesList.present();
      }
    });

I don't know if this is the best solution but it seems to work

roman-rr commented 3 years ago

@GosuMania Big thanks. The issue was with wrong height calculation when fitHeight: true property enabled. Pushed fix to master branch, should works by default.

tech-systems / panes

[BUG] Bottomsheet blank when keyboard appears #155