Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Ionic call Keyboard.getResizeMode() on Android throws uncaught error #27503

Closed
3 tasks done
farshidpg opened this issue May 18, 2023 · 20 comments · Fixed by #27514
Closed
3 tasks done

bug: Ionic call Keyboard.getResizeMode() on Android throws uncaught error #27503

farshidpg opened this issue May 18, 2023 · 20 comments · Fixed by #27514
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@farshidpg
Copy link

farshidpg commented May 18, 2023

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

when app start in android the Keyboard.getResizeMode() call from one of the ionic global component that it catched and show runtime error . I read docs of capacitor keyboard and we know that getResizeMode() method is for iOS only . why in android called on app init automatically ?

This is my console error :

result Keyboard.getResizeMode (#71292250)

{
    "message": "not implemented",
    "code": "UNIMPLEMENTED"
}

Also this is screen shots of android version

it’s make my app unuseable with vue-cli in vite version the runtime error not show but console throw excetiopn still fire

Screenshot 2023-05-18 at 4 16 12 PM

And my android Emulator

Screenshot 2023-05-18 at 4 16 40 PM

Expected Behavior

I think if ionic use the Keyboard.getResizeMode() in any components it should check platform first for ignore calling on android and call in iOS only

Steps to Reproduce

  1. Check the global ionic components that using Keyboard.getResizeMode()
  2. make sure the platform checked first and call Keyboard.getResizeMode() only in iOS
  3. Maybe Catche exception in capacitor/keyboard plugin for ignore runtime error even Keyboard.getResizeMode() called in any platform by 3rd Party plugins or components thats not official .

Code Reproduction URL

GitHub starter tab app created with latest ionic cli and ionic vue and capacitor 5 ( But the bug is still with cap 4 too and I think its fire from ionic )

https://github.com/farshidpg/ionic-starter/tree/main

Starter app ionic info

Ionic:

   Ionic CLI       : 7.1.1
   Ionic Framework : @ionic/vue 7.0.7

Capacitor:

   Capacitor CLI      : 5.0.3
   @capacitor/android : 5.0.3
   @capacitor/core    : 5.0.3
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.2

System:

   NodeJS : v19.6.1
   npm    : 9.5.0
   OS     : macOS Unknown

the problem still get error on app init

Ionic Info


   Ionic CLI       : 7.1.1
   Ionic Framework : @ionic/vue 7.0.7

Capacitor:

   Capacitor CLI      : 4.8.0
   @capacitor/android : 4.8.0
   @capacitor/core    : 4.8.0
   @capacitor/ios     : 4.8.0

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.2

System:

   NodeJS : v19.6.1
   npm    : 9.5.0
   OS     : macOS



Android SDK : 33

Additional Information

Capacitor keyboard plugin information getresizemode method

https://capacitorjs.com/docs/v4/apis/keyboard#getresizemode

I check my project and I know I don't use Keyboard.getResizeMode() method manually , I'm sure it's called globally

@ionitron-bot ionitron-bot bot added the triage label May 18, 2023
@liamdebeasi liamdebeasi self-assigned this May 18, 2023
@liamdebeasi liamdebeasi added the ionitron: needs reproduction a code reproduction is needed from the issue author label May 18, 2023
@ionitron-bot
Copy link

ionitron-bot bot commented May 18, 2023

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

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

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

@liamdebeasi liamdebeasi removed their assignment May 18, 2023
@ionitron-bot ionitron-bot bot removed the triage label May 18, 2023
@farshidpg
Copy link
Author

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

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

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

The Code Reproduction URL added to issue ( edited )

@amandaejohnston amandaejohnston added triage and removed ionitron: needs reproduction a code reproduction is needed from the issue author labels May 18, 2023
@sovaltd
Copy link

sovaltd commented May 18, 2023

any body can help with this i have same issue

@sean-perkins sean-perkins self-assigned this May 18, 2023
@sean-perkins
Copy link
Contributor

Hello everyone 👋

Could someone test with this dev-build and let me know if they run into any issues?

7.0.8-dev.11684441614.1e9b8b2d

@sean-perkins sean-perkins added the needs: reply the issue needs a response from the user label May 18, 2023
@sean-perkins sean-perkins removed their assignment May 18, 2023
@ionitron-bot ionitron-bot bot removed the triage label May 18, 2023
@farshidpg
Copy link
Author

farshidpg commented May 18, 2023

Hello everyone 👋

Could someone test with this dev-build and let me know if they run into any issues?

7.0.8-dev.11684441614.1e9b8b2d

Thank you for update , I tested the 7.0.8-dev.11684441614.1e9b8b2d but the problem not solve, nothing change on console error and runtime error , I test again with a starter ionic app without tabs template and check the console there is not any problem . but just in simple pages . when use tabs or footer the error coming back .

I think this problem is for this change

"footer, tab-bar: wait for resize before re-showing (#27417) (70d9854), closes #25990" @ 7.0.7 version update change log

https://github.com/ionic-team/ionic-framework/blob/main/CHANGELOG.md

because when using the tab template console show me Keyboard.getResizeMode() called on android but in pages without taps all things is ok

@ionitron-bot ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels May 18, 2023
@sean-perkins
Copy link
Contributor

sean-perkins commented May 18, 2023

@farshidpg thanks for testing so quickly!

I believe the problem is related to that change as well, but with the shared keyboard logic we encapsulate.

For reference, this is what the dev-build changed: e9b8b2d

I'll need to do a little more discovery to narrow where else the resize mode is being called (or if the platform check is not sufficient enough for this use case).

Edit: I actually see where my logic is flawed - an engine can be defined on md... let me rework that.

@farshidpg
Copy link
Author

farshidpg commented May 18, 2023

@farshidpg thanks for testing so quickly!

I believe the problem is related to that change as well, but with the shared keyboard logic we encapsulate.

For reference, this is what the dev-build changed: e9b8b2d

I'll need to do a little more discovery to narrow where else the resize mode is being called (or if the platform check is not sufficient enough for this use case).

Edit: I actually see where my logic is flawed - an engine can be defined on md... let me rework that.

Thank you , I check dev-build changed .

I'm just thinking out loud for this solution , what happens if you do like this ?
( add optional for getResizeMode ) may be work , I don't know :)

getResizeMode(): Promise<KeyboardResizeOptions | undefined> {
    const engine = this.getEngine();
    if (!engine || !engine?.getResizeMode) {
    if (!engine || !isPlatform('ios') || !engine?.getResizeMode) {
      // getResizeMode is only available on iOS
      // see: https://ionicframework.com/docs/native/keyboard#getresizemode
      return Promise.resolve(undefined);
    }

    return engine.getResizeMode();
  },

@sean-perkins
Copy link
Contributor

If you are up for checking another dev-build: 7.0.8-dev.11684444351.1b1ab142

I updated the checks so that the check for platform is first: b1ab142. This should cause the behavior to noop for MD or if you are not using the Keyboard plugin from Capacitor.

If that doesn't work - I can boot up an emulator and do additional testing tomorrow.

@farshidpg
Copy link
Author

If you are up for checking another dev-build: 7.0.8-dev.11684444351.1b1ab142

I updated the checks so that the check for platform is first: b1ab142. This should cause the behavior to noop for MD or if you are not using the Keyboard plugin from Capacitor.

If that doesn't work - I can boot up an emulator and do additional testing tomorrow.

Thank you , I test again and problem still exist on tabs template .

I'am using the @capacitor/keyboard plugin version 4.1.1 but I test it with 4.1.0 and also 5.0.2

this is part of my package.json content

"@capacitor-community/file-opener": "^1.0.5",
"@capacitor/android": "4.8.0",
"@capacitor/app": "^4.1.1",
"@capacitor/camera": "^4.1.5",
"@capacitor/cli": "^4.8.0",
"@capacitor/clipboard": "^4.1.0",
"@capacitor/core": "^4.8.0",
"@capacitor/device": "^4.1.0",
"@capacitor/filesystem": "^4.1.4",
"@capacitor/haptics": "4.1.0",
"@capacitor/ios": "4.8.0",
"@capacitor/keyboard": "4.1.1",
"@capacitor/local-notifications": "^4.1.5",
"@capacitor/push-notifications": "^4.1.3-nightly-20230316T150919.0",
"@capacitor/splash-screen": "^4.2.0",
"@capgo/capacitor-mute": "^1.1.52",
"@capgo/native-audio": "^5.1.19",
"@ionic/core": "^7.0.8-dev.11684444351.1b1ab142",
"@ionic/pwa-elements": "^3.1.1",
"@ionic/storage": "^3.0.6",
"@ionic/vue": "^7.0.8-dev.11684444351.1b1ab142",
"@ionic/vue-router": "^7.0.8-dev.11684444351.1b1ab142",
"@vue/compiler-sfc": "^3.3.4",
"vue": "^3.3.4",
"vue-loader": "^17.1.1",
"vue-router": "^4.2.0",

@sean-perkins
Copy link
Contributor

@farshidpg can you remove the explicit @ionic/core dependency and run npm ls @ionic/core?

The expected output should be:

starter@0.0.1 /Users/sean/Documents/ionic/issues/ionic-starter
└─┬ @ionic/vue@7.0.8-dev.11684444351.1b1ab142
  └── @ionic/core@7.0.8-dev.11684444351.1b1ab142

Can you also confirm you are re-running npm run build and npx cap copy android after updating the dependency?

With the latest dev-build on the reproduction, I do not receive errors in the console on an emulator.

@farshidpg
Copy link
Author

farshidpg commented May 19, 2023

@farshidpg can you remove the explicit @ionic/core dependency and run npm ls @ionic/core?

The expected output should be:

starter@0.0.1 /Users/sean/Documents/ionic/issues/ionic-starter
└─┬ @ionic/vue@7.0.8-dev.11684444351.1b1ab142
  └── @ionic/core@7.0.8-dev.11684444351.1b1ab142

Can you also confirm you are re-running npm run build and npx cap copy android after updating the dependency?

With the latest dev-build on the reproduction, I do not receive errors in the console on an emulator.

Yes I run npx cap copy and npx cap sync but the result of npm ls @ionic/core is wrong .

This is result :

starter@0.0.1 /Users/farshidrezaiyan/Projects/ionic-starter
├── @ionic/core@7.0.8-nightly.20230518
└─┬ @ionic/vue@7.0.8-nightly.20230518
  └── @ionic/core@7.0.8-nightly.20230518 deduped

But why ? my package.json is update and I run :

npm install
npm update
ionic capacito sync
ionic capacito update
ionic capacitor copy android
and
ionic capacitor run android -l --external

whats wrong with my project in local that still using 7.0.8-nightly.20230518 ?

Edit :
I think my project use 7.0.8-dev.11684444351.1b1ab142 but maybe my command line ( zsh MacOs ) doesn't show timestamp and maybe converted to date , because the name ( date) [ 20230518 ] is look like the 11684444351 time stamp , for sure I rollback to 7.0.7 and again change the @core , @vue and @router to 7.0.8-dev.11684444351.1b1ab142 and run npm run install and npm successfully installed new packages

But I get console error on android also get runtime error

@sean-perkins
Copy link
Contributor

NPM package resolution can be difficult. The nightly- build is a different output than the provided dev build.

You can try removing the leading ^ in your package.json:

{
  "name": "starter",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "test:e2e": "cypress run",
    "test:unit": "vitest",
    "lint": "eslint"
  },
  "dependencies": {
    "@capacitor/android": "5.0.3",
    "@capacitor/app": "5.0.2",
    "@capacitor/core": "5.0.3",
    "@capacitor/haptics": "5.0.2",
    "@capacitor/keyboard": "5.0.2",
    "@capacitor/status-bar": "5.0.2",
    "@ionic/vue": "7.0.8-dev.11684444351.1b1ab142",
    "@ionic/vue-router": "7.0.8-dev.11684444351.1b1ab142",
    "ionicons": "^7.0.0",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@capacitor/cli": "5.0.3",
    "@vitejs/plugin-legacy": "^4.0.2",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "@vue/test-utils": "^2.3.0",
    "cypress": "^12.7.0",
    "eslint": "^8.35.0",
    "eslint-plugin-vue": "^9.9.0",
    "jsdom": "^21.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vitest": "^0.29.2",
    "vue-tsc": "^1.0.24"
  },
  "description": "An Ionic project"
}

If npm ls @ionic/core continues to resolve the incorrect version, I can provide an updated fork to your original repo for verification.

@farshidpg
Copy link
Author

farshidpg commented May 19, 2023

NPM package resolution can be difficult. The nightly- build is a different output than the provided dev build.

You can try removing the leading ^ in your package.json:

Yes, its work I remove the ^ and now my project using the 7.0.8-dev.11684444351.1b1ab142 I checked it .

Also the error solved 👍 the Keyboard.getResizeMode() don't call anymore in android and no console error , no runtime error ( I was getting an runtime error with vue-cli , I only had a console error and throw/stop functionality with Vite )

Thank you bro, you saved me 🥇

Will this bug fix ( version ) be merged with the next update in 7.0.8 ?

@sean-perkins sean-perkins changed the title bug: ionic call Keyboard.getResizeMode() on android bug: Ionic call Keyboard.getResizeMode() on Android throws uncaught error May 19, 2023
@sean-perkins sean-perkins added package: core @ionic/core package type: bug a confirmed bug report labels May 19, 2023
@ionitron-bot ionitron-bot bot removed the triage label May 19, 2023
@sean-perkins
Copy link
Contributor

It is still subject to the team's review, you can track the pull request here: #27514

Once merged, it will be available on the next week's patch release (we try to release weekly).

Happy to help & thanks for the quick testing and verification 🎉

@farshidpg
Copy link
Author

farshidpg commented May 24, 2023

It is still subject to the team's review, you can track the pull request here: #27514

Once merged, it will be available on the next week's patch release (we try to release weekly).

Happy to help & thanks for the quick testing and verification 🎉

Hello , the 7.0.8 version released , is there this bug fix in 7.0.8 ? ( is it merged )

Thank you

@chriswep
Copy link

i tried 7.0.8 and the error is still there.

any reason why this wasn't included in the patch release? from what i see this throws an error on every android device.

@sean-perkins
Copy link
Contributor

sean-perkins commented May 24, 2023

Once merged, it will be available on the next week's patch release (we try to release weekly).

The PR was not merged, so it was not included in this week's patch release. The PR was still receiving feedback and was not ready for today's release.

It has since been tested and approved with an alternative approach that isn't coupled to platform checks.

It will be moved into a merge queue shortly and will be ready for the next week's release.

Edit:

Spoke with the team, we will plan to release the patch with that fix tomorrow as well to help everyone out here!

sean-perkins added a commit that referenced this issue May 24, 2023
Issue number: Resolves #27503

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Ionic Framework wraps the implementation around Capacitor's Keyboard
plugin API, to provide additional functionality and behavior
"automatically" in Ionic, when the plugin is installed.

Certain methods such as `getResizeMode()` are only available for certain
platforms and will cause an error when running in the unsupported
platform.

Ionic Framework does not check to see if that platform is active before
calling potentially unsupported methods, which leads to an exception for
scenarios such as this - calling `getResizeMode()` on Android.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Handles the uncaught exception by returning `undefined` if the plugin
method is unavailable.
- Developers do not receive an uncaught exception on Android when using
the Capacitor Keyboard plugin with Ionic Framework

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev-build: `7.0.8-dev.11684444351.1b1ab142` (outdated)
@liamdebeasi
Copy link
Contributor

Hi everyone,

We released a fix for this as part of the v7.0.9 release today. Thanks to everyone who helped test the fix!

v7.0.9 changelog: https://github.com/ionic-team/ionic-framework/releases/tag/v7.0.9

@chriswep
Copy link

thank you, there is no uncaught error anymore.

in dev mode i can still see the native call to the method failing in chrome devtools. it feels "unusual" to have an error-returning method call on the default startup path of half the install base. but i'm probably nit-picking here and you have good reasons for it.

@ionitron-bot
Copy link

ionitron-bot bot commented Jun 24, 2023

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Jun 24, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants