bug: No animation on modal when we setCurrentBreakpoint

[LePtiDev]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When i use the controller of the ion-modal it's work perfectly but if i change the breakpoints in code the modal change but the animation not working.

Expected Behavior

I create the modal with the controller and when i change with the function (setCurrentBreakpoint) the modal change breakpoints but without any animation.

`const markerModal = ref()

export const openMarkerModal = async (marker: Marker) => { markerModal.value = await modalController.create({ component: markerVue, breakpoints: [0, 0.2, 0.5], initialBreakpoint: 0.5, backdropDismiss: false, backdropBreakpoint: 1, componentProps: { marker, }, }) markerModal.value.present() }

export const setMarkerModalBreakpoint = (breakpoint) => { markerModal.value.setCurrentBreakpoint(breakpoint) } `

Steps to Reproduce

You need to call a function to create the modal then change breack point with an other break point. I give you my package json.

{ "name": "Hexplo", "private": true, "version": "0.0.1", "type": "module", "author": { "name": "Quentin Guerrier", "email": "75quentinguerrier@gmail.com" }, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "lint": "eslint --ext .ts,.js,.vue .", "prepare": "husky install", "ionic:build": "npm run build", "ionic:serve": "npm run dev" }, "devDependencies": { "@capacitor/cli": "4.4.0", "@heroicons/vue": "^2.0.11", "@ionic/vue": "^6.3.4", "@mapbox/polyline": "^1.1.1", "@nuxtjs/eslint-config-typescript": "^10.0.0", "@nuxtjs/google-fonts": "3.0.0-0", "@nuxtjs/tailwindcss": "^5.3.2", "axios": "^1.1.3", "cordova-res": "0.15.4", "eslint": "^8.22.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-nuxt": "^3.2.0", "eslint-plugin-prettier": "^4.2.1", "firebase": "^9.13.0", "geofire-common": "^6.0.0", "husky": "^8.0.1", "maplibre-gl": "^2.4.0", "nuxt": "3.0.0-rc.8", "prettier": "^2.7.1", "sass": "^1.54.5", "typescript": "^4.7.4", "vee-validate": "^4.7.2", "yup": "^0.32.11" }, "dependencies": { "@capacitor/android": "4.4.0", "@capacitor/app": "4.0.1", "@capacitor/camera": "^4.1.3", "@capacitor/core": "4.4.0", "@capacitor/device": "^4.0.1", "@capacitor/geolocation": "^4.0.1", "@capacitor/haptics": "4.0.1", "@capacitor/ios": "4.4.0", "@capacitor/keyboard": "4.0.1", "@capacitor/status-bar": "4.0.1" } }

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.3 (/usr/local/lib/node_modules/@ionic/cli)

Capacitor:

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

Utility:

cordova-res : 0.15.4 native-run : 1.7.1

System:

NodeJS : v16.18.1 (/usr/local/bin/node) npm : 8.19.2 OS : macOS

Additional Information

No response

[ionitron-bot[bot]]

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.

[sean-perkins]

If you can create a reproduction for this, that would help me a lot with identifying the problem.

We do have sheet modal examples on our docs: https://ionicframework.com/docs/api/modal#sheet-modal you can click the framework you are using and then click the Stackblitz icon (lightning bolt icon) to create a Stackblitz project to modify the code. Just remember to save your example and then paste the link here.

Thanks!

[averyjohnston]

This issue is being closed due to insufficient reproduction. If this is still a problem in the latest version of Ionic, please open a new issue and ensure the template is fully filled out. Thank you!