ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.71k stars 13.51k forks source link

bug: PickerController does not let user select item after moving to Capacitor #21825

Closed CosmicWebServices closed 3 years ago

CosmicWebServices commented 4 years ago

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior: I have a two-column PickerController which after moving to capacitor from Cordova it no longer let's users select and throws an error:

⚡️  ------ STARTUP JS ERROR ------

⚡️  [error] - {}
⚡️  TypeError: engine.selectionStart is not a function. (In 'engine.selectionStart()', 'engine.selectionStart' is undefined)
⚡️  URL: capacitor://localhost/common-es2015.js
⚡️  common-es2015.js:187:34

I have not changed any pickerController code and I have no references to selectionStart

Expected behavior: User can change the selection on the pickerController

Steps to reproduce:

Screen Shot 2020-07-27 at 10 45 01 AM

On iOS open a pickerController and notice the ability to change the item is "frozen".

Related code:

const picker = await this.pickerController.create({
      columns: this.getColumns(2, 11, options),
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Confirm',
          handler: (value) => {
            console.log(`Got Value ` + JSON.stringify(value));
            if (value['col-1'].text === 'Never') {
              this.taptic.selection();
              this.expireLabelText = 'Never';
            } else if (value['col-0'].text === '') {
              this.taptic.notification({type: 'error'});
              alert('Please set a number value!');
            } else {
              this.taptic.selection();
              if (parseInt(value['col-0'].text) > 1) {
                this.expireLabelText = value['col-0'].text + ' ' + value['col-1'].text;
              } else {
                this.expireLabelText = value['col-0'].text + ' ' + (value['col-1'].text).slice(0, -1);
              }
            }
          }
        }
      ]
    });

    await picker.present();

Ionic info:

Ionic:

   Ionic CLI                     : 6.10.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.901.12
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.3.0

Capacitor:

   Capacitor CLI   : 2.3.0
   @capacitor/core : 2.3.0

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   NodeJS : v12.14.1 (/usr/local/bin/node)
   npm    : 6.14.7
   OS     : macOS
ionitron-bot[bot] commented 4 years ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

CosmicWebServices commented 3 years ago

The code contained is really all I have reproducing wise... it kind of just happened once I switched to Capacitor

CosmicWebServices commented 3 years ago

Update: Tried adding a date/time picker and having the same issue/error.

Ionic:

   Ionic CLI                     : 6.10.2 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.901.12
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.3.0

Capacitor:

   Capacitor CLI   : 2.3.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   NodeJS : v12.14.1 (/usr/local/bin/node)
   npm    : 6.14.7
   OS     : macOS Big Sur
liamdebeasi commented 3 years ago

Can you reproduce this issue in a blank Ionic starter app? Code snippets are typically not enough for us to reproduce the issue.

CosmicWebServices commented 3 years ago

Let me see if I can. Thank you!

CosmicWebServices commented 3 years ago

I cannot replicate with a blank app :/ Might have to see what's going on with my code

CosmicWebServices commented 3 years ago

Unrelated issue found the source. Thank you very much.

StevieWag commented 3 years ago

@CosmicWebServices would be awesome if you share what caused the issue on your side. We have the same issue from one day to another with out ion-datetime. Would really appreciate your feedback

joshoconnor89 commented 3 years ago

i got the same issue too, what was the fix?

jan-nick commented 3 years ago

I fixed it by removing the cordova taptic engine plugin (there is also a capacitor haptics plugin for this: https://capacitorjs.com/docs/apis/haptics).

ionitron-bot[bot] commented 3 years ago

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.