Ionic-framework: bug: ion-popover keyboardClose not working

[ikerllorens]

Bug Report

Ionic version:
[x] 5.1

Current behavior:
When presenting a popover through code using the prop keyboardClose: false, when the popover is presented the keyboard closes anyways. This didn't happen in Ionic 5.0.7 .

Expected behavior:
The presentation of the popover should not hide the keyboard

Steps to reproduce:
Modal presented inside with an inputChange from a text area. When the condition to present the popover is met, create a popover, the keyboard should not be hidden and the content of the popover changes dynamically through a service.

Related code:
This is how I create the popover.

 this.suggestionPopover = await this.popoverController.create({
          component: SuggestionPopoverComponent,
          componentProps: {
            mode
          },
          event,
          translucent: true,
          showBackdrop: false,
          keyboardClose: false
        });

The complete function:

async inputTextArea(event) {
    let mode = '';
    let splitted = this.postComment.split('#');
    if (splitted[splitted.length - 1].includes(' ') || splitted.length === 1) {
      splitted = this.postComment.split('@');
      if (splitted[splitted.length - 1].includes(' ') || splitted.length === 1) {
        mode = '';
      } else {
        mode = 'user';
      }
    } else {
      mode = 'hashtag';
    }

    if (mode === '') {
      if (this.suggestionPopover) {
        await this.suggestionPopover.dismiss();
        this.suggestionPopover = null;
      }
      return;
    } else {
      if (!this.suggestionPopover) {
        this.suggestionPopover = await this.popoverController.create({
          component: SuggestionPopoverComponent,
          componentProps: {
            mode
          },
          event,
          translucent: true,
          showBackdrop: false,
          keyboardClose: false
        });
        if (mode === 'hashtag') {
          this.suggestionPopover.onDidDismiss().then((suggestionSelected) => {
            if (suggestionSelected.data.hashtag) {
              // tslint:disable-next-line:no-shadowed-variable
              const splitted = this.postComment.split('#');
              let comment = '';
              splitted[splitted.length - 1] = suggestionSelected.data.hashtag;
              this.hashtags.push(suggestionSelected.data);

              for (let i = 0; i < splitted.length; i++ ) {
                if (i !== 0) {
                  comment = comment + '#';
                }
                comment = comment + splitted[i];
              }

              this.postComment = comment;
              this.modelTextarea.setFocus();
            }
          });
        } else if (mode === 'user') {
          this.suggestionPopover.onDidDismiss().then((suggestionSelected) => {
            if (suggestionSelected.data.username) {
              // tslint:disable-next-line:no-shadowed-variable
              const splitted = this.postComment.split('@');
              let comment = '';
              splitted[splitted.length - 1] = suggestionSelected.data.username;
              this.tags.push(suggestionSelected.data);

              for (let i = 0; i < splitted.length; i++ ) {
                if (i !== 0) {
                  comment = comment + '@';
                }
                comment = comment + splitted[i];
              }

              this.postComment = comment;
              this.modelTextarea.setFocus();
            }
          });
        }
      }

      if (mode === 'hashtag') {
        const subs  = this.hashtagsService.findhasthagInDB(splitted[splitted.length - 1]).subscribe(values => {
          this.hashtagsService.hashtagSuggestions = values;
          subs.unsubscribe();
        }, error => {
          // TODO: Catch error
        });
      } else if (mode === 'user') {
        const subs  = this.userService.searchUser(splitted[splitted.length - 1]).subscribe(values => {
          this.userService.usersSuggestions = values;
          subs.unsubscribe ();
        }, error => {
          // TODO: Catch error
        });
      }

      await this.suggestionPopover.present();
    }
  }

The popover component:

import {Component, Input, OnInit} from '@angular/core';
import {HashtagsService} from '@services/hashtags.service';
import {PopoverController} from '@ionic/angular';
import {UserService} from '@services/user.service';

@Component({
  selector: 'app-suggestion-popover',
  templateUrl: './suggestion-popover.component.html',
  styleUrls: ['./suggestion-popover.component.scss'],
})
export class SuggestionPopoverComponent implements OnInit {
  @Input() mode: string;

  constructor(public hashtagsService: HashtagsService, private popoverController: PopoverController, public userService: UserService) { }

  ngOnInit() {}

  selectHashtag(hashtag: any) {
    this.popoverController.dismiss(hashtag);
  }

  selectUser(user: any) {
    this.popoverController.dismiss(user);
  }

}

Other information:

I uploaded a zip file with two videos, the code is exactly the same, just changing the version of ionic to 5.0.7 and the property works, in 5.1.0 the keyboard is hidden no matter the keyboardClose value.

Ionic info:

nic:

   Ionic CLI                     : 6.8.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.0
   @angular-devkit/build-angular : 0.901.4
   @angular-devkit/schematics    : 9.1.4
   @angular/cli                  : 9.1.4
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.1.0
   @capacitor/core : 2.1.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 25 other plugins)

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.0.0) : 0.3.0

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.2
   NodeJS     : v12.16.1 (/usr/local/Cellar/node@12/12.16.1/bin/node)
   npm        : 6.13.4
   OS         : macOS Catalina
   Xcode      : Xcode 11.4.1 Build version 11E503a

[videos.zip](https://github.com/ionic-team/ionic/files/4595501/videos.zip)

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm i @ionic/[email protected]

[ikerllorens]

Thanks @liamdebeasi ! I confirm it works on iOS and Android as intended. Is this safe to use in production use? Or is there an ETA for this version? Its to know to rollback to 5.0.7 or use this version in the meanwhile.

[liamdebeasi]

Here is a production safe version: 5.2.0-dev.202005072103.9c76872

This build has the contents of the 5.1.0 release plus the commit that fixes this bug. Alternatively, you can roll back to 5.0.7. We plan to have a patch release out soon with this fix.

[ikerllorens]

Great, thanks! Should I close the issue? (first time doing it)

[liamdebeasi]

You can keep the issue open. When my PR (https://github.com/ionic-team/ionic/pull/21240) is merged, GitHub will automatically close this issue.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/21240, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.