ionic-framework

Bug Fixes

• all: update tslib to resolve export errors (#23092) (0cdd326), closes #23090
• react: correctly show ion-back-button when going back (#23069) (1c93b75), closes #22692

Bug Fixes

• item: detail icon now respects rtl mode (#23081) (b04fb6e), closes #23078

Bug Fixes

• custom-elements: overlays now present correctly when using custom elements build (#23039) (e4bf052), closes #23029
• item: detail icon is no longer announced by screen readers (#23055) (c877061), closes #23054
• label: properly float labels for non-input items (#23060) (c8a3999)
• react: only pass tab event props from IonTabs to IonTabBar if defined (#23024) (f94e618), closes #23023
• refresher: progressEnd no longer errors when pulling quickly in MD native refresher (#23056) (67617fb)
• virtual-scroll: allow null in items property (#23047) (2a253a1)
• vue: passing params as props are correctly updated when switching pages (#23049) (2f54bc1), closes #23043

Bug Fixes

• all: improve support for ids with special characters when getting label element (#22680) (19d63f6), closes #22678
• header: collapsed toolbar is no longer incorrectly shown when using ion-refresher (#22937) (5300dcc), closes #22829
• label: only show placeholder with floating label when focused (#22958) (9282aa6), closes #17571
• progress-bar: use correct theme colors in dark mode (#22965) (b6b2714), closes #20098
• radio-group: pressing space no longer jumps screen to bottom of page (#22892) (3a0465e), closes #22716
• react: IonRouterOutlet now respects animated={false} prop (#22905) (da1b7a0), closes #22903
• react: onIonTabsWillChange and onIonTabsDidChange event handlers are now properly bound to IonTabs (#22233) (b064fde)
• react, vue: navigating using ion-back-button now selects correct page (#22974) (cd8ffd8), closes #22830
• react, vue: tab buttons no longer throw an error if href is undefined (#22998) (943e3f6), closes #22997
• refresher: add correct dark mode styles (#22639) (c05476b), closes #22637
• vue: correctly remove active state from tab button when navigating away from tab (#23000) (a2763af), closes #22597
• vue: prevent race conditions when opening overlays (#22883) (68a9b80), closes #22880

Features

• custom-elements: add experimental custom elements build (#22863) (0de75af)
• progress-bar: add parts for more design customization (#22938) (e256d3f), closes #20062 #21820
• react: add react hooks to control overlay components (#22484) (b83e009)
• searchbar: add showClearIcon property (#22759) (215eb5d), closes #22738
• vue: add composition API ionic lifecycle hooks (#22970) (dd1c8db), closes #22769

Bug Fixes

• vue: account for event name changes in vue 3.0.6+ (#22980) (7dd2e6d), closes #22977

Bug Fixes

• angular: update ngAdd schematic (#22858) (487349f)
• app: keyboard no longer hides when using contenteditable (#22857) (b6b2d34), closes #22856
• ios: scroll assist no longer prevents first click event from firing (#22845) (f7d4c21), closes #21871
• select: class on component now indicates when select is open (#22846) (1a5accc), closes #22801
• vue: ionChange events now propagate correctly (#22872) (ff0f1da), closes #22870

Bug Fixes

• react: do not unmount overlay inner component until overlay is dismissed (#22813) (ab1fc8f), closes #22761
• react: adding dynamic class to ion-page no longer hides component (#22666) (a01bdb8), closes #22631
• react: improve view matching logic (#22569) (f891f66)
• react, vue: do not show back button when replacing to root page (#22750) (9e9a372), closes #22528
• refresher: correctly detect spinner when using native refresher (#22800) (e2d8e5c), closes #22706
• title: only add large title transition when using collapsible header (#22762) (348c50b), closes #22760
• vue: all ionic vue components can now use router link (#22743) (3d6ac13)
• vue: correctly determine leaving view when transitioning to a new instance of a previous page (#22655) (e3a05bf), closes #22654 #22658
• vue: ensure v-model value is properly synced before ionChange event (#22749) (e1d6627), closes #22610
• vue: improve path matching with tabs, deprecated adding additional pages as children of tabs without a router outlet (#22807) (2a3ce9a), closes #22519
• vue: improve v-model binding sync between vue wrappers and web components (#22745) (64719f4), closes #22731
• vue: output commonjs format for node environments (#22766) (7ecae2e)
• vue: tab bar is now correctly hidden when keyboard is open (#22687) (5c27dd8)

Bug Fixes

• android: setting hardwareBackButton: false in config now disables default webview behavior (#22555) (dc9faa6), closes #18237
• button: allow aria-label to be inherited on inner button (#22632) (818e387), closes #22629
• react: hardware back button now navigates correctly (36939e1)
• react: setting a ref now allows other props to be passed in (31f45cd), closes #22609
• refresher: clean up old css if calling refresh method before native refresher is setup (#22640) (8d5ed47), closes #22636
• refresher: refresher correctly detects native refresher when shown asynchronously (#22623) (5ed73cd), closes #22616
• vue: adding non tab button elements inside ion-tab-bar no longer causes errors (#22643) (61cf0c5), closes #22642
• vue: correctly handle navigation failures (#22621) (216f51b), closes #22591
• vue: correctly remove old view when replacing route (#22566) (4f4f31b), closes #22492
• vue: pass in correct route to props function (#22605) (01afdc4), closes #22602
• vue: query strings are now correctly handled when navigating back (#22615) (a94e2a8), closes #22517
• vue: swipe back gesture is properly disabled when swipeBackEnabled config is false (#22568) (9d04c12), closes #22567

For Ionic Vue Developers

Vue Router 4 has been released! Be sure to update from the release candidate to the latest stable version of Vue Router.

For more information on the changes in Vue Router 4, see https://github.com/vuejs/vue-router-next/releases/tag/v4.0.0.

npm install vue-router@4

Bug Fixes

• checkbox: click handler now fires properly (#22573) (0786835), closes #22557
• radio: properly announce radios on screen readers and resolve axe errors (#22507) (afcc46e)
• react: eliminate use of deprecated findDOMNode, resolves #20972 (5275332)
• router: navigation guards now fire when navigating to a page with params (#22521) (1956f98), closes #22516
• select: fix a11y issues with axe and screen readers (#22494) (04b874e), closes #21552 #21548
• select: improvements for announcing placeholder and value on screenreaders (#22556) (ea52db6)
• vue: onBeforeRouteLeave and onBeforeRouteUpdate hooks now fire properly (#22542) (8002114), closes #22540
• vue: tabs now correctly fire lifecycle events (#22479) (cdc2fb6), closes #22466
• vue: unit testing a routerLink-capable component no longer warns of missing router dependency (#22532) (4e23aad), closes #22506

For Ionic Vue Developers

When updating to Ionic Vue v5.5.1 make sure you are on the latest version of vue-router@next to take advantage of the bug fixes in this release:

npm install vue-router@next

Bug Fixes

• backdrop: nvda no longer incorrectly announces backdrop (#22481) (2d878fc), closes #22102
• checkbox: use a native input to fix a11y issues with axe and screen readers (#22402) (7214a84), closes #21644 #20517 #17796
• input: title attribute is now automatically inherited (#22493) (abad12f), closes #22055
• refresher: ios native refresher now works in side menu (#22449) (a4a6453)
• refresher: md native refresher now works in side menu (#22446) (6b817f2), closes #20832
• toggle: use a native input to fix a11y issues with axe and screen readers (#22477) (813611a), closes #22011 #21552
• vue: correctly pass route props to components (#22476) (0956f8b), closes #22472
• vue: tab bar now works with slot="top" (#22461) (e17c822), closes #22456

Features

• chip: add disabled property (#20658) (0a0cbd8), closes #19510
• segment: add swipeGesture property to allow for disabling of the swipe gesture (#22087) (65bc995), closes #22048
• vue: composition api lifecycle methods (#22241) (f5b0299)
• vue: vetur support (#22403) (e76f79d)
• vue: web-types support (#22428) (639314a), closes #19522

Performance Improvements

• ios: move content to stacking context while preserving position: fixed behavior (#22489) (d77a9d5), closes #22473

Bug Fixes

• build: add missing es5 output (228d349)

Bug Fixes

• all add missing vendor prefixes to css (0989ea5)

Bug Fixes

• alert: correctly position alert when keyboard is open (#22425) (9752cd6)
• ios: contenteditable elements are now selectable on iOS (#22404) (023fb18), closes #18368
• item: only add click event listener to items with inputs (#22352) (9659ad6), closes #22011
• range: gesture is now properly re-created on connectedCallback (#22407) (2fea36f), closes #22335
• refresher: work properly in modal by waiting for content to be ready (#22390) (91d0414), closes #22256
• segment-button: color property is now reactive if previously undefined (#22405) (04161c9), closes #20831
• vue: correctly switch tabs after going back (#22309) (daf6a92), closes #22307
• vue: ensure view is updated correctly when replacing a route outside of a nav guard (#22429) (5a4d0c0), closes #22412

Performance Improvements

• ios: move content to stacking context to improve scrolling performance on iOS devices (#22180) (9f44966)

Bug Fixes

• select: properly align label with select in item in MD mode (#22330) (1a2e532), closes #19887
• vue: going back with query params now goes to correct view (#22350) (561a4ac), closes #22324
• vue: improve compatibility with route guards (#22371) (31f9bc8), closes #22344
• vue: improve handling of parameterized urls (#22360) (6fad0fe), closes #22359
• vue: lifecycle events are now fired in component context (#22348) (bcef804), closes #22338

This is the first stable release of Ionic Vue.

Enjoy the Vue! 🎉

New to Ionic Vue?

Check out our Quickstart Guide to get up and running. Then be sure to check out our Building Your First App Guide to learn how build a cross platform Ionic Vue application from start to finish!

This version is dedicated to our upcoming Ionic Vue release.

Bug Fixes

• vue: ion-page component is now properly shown with HMR (#22319) (c5ab562)

Upgrade Steps

npm install @ionic/[email protected] @ionic/[email protected] --save-exact

New to Ionic Vue?

Check out our Quickstart Guide to get up and running. Then be sure to check out our Building Your First App Guide to learn how build a cross platform Ionic Vue application from start to finish!

This version is dedicated to our upcoming Ionic Vue release.

Bug Fixes

• vue: do not hide page content when using ion-page in non-routing contexts (#22302) (fff82d0), closes #22300
• vue: going back from tabs page to a non-tabs page now selects correct page (#22275) (b06ae16), closes #22258
• vue: improve swipe to go back reliability (#22288) (c74fd41), closes #22237
• vue: modal, popover, and nav are now created within application context (#22282) (6026c65), closes #22079
• vue: pages now render in correct outlet when using multiple nested outlets (#22301) (52f655c), closes #22286

Upgrade Steps

npm install @ionic/[email protected] @ionic/[email protected] --save-exact

New to Ionic Vue?

Check out our Quickstart Guide to get up and running. Then be sure to check out our Building Your First App Guide to learn how build a cross platform Ionic Vue application from start to finish!

This version is dedicated to our upcoming Ionic Vue release.

Bug Fixes

• vue: correctly handle query params (#22253) (6849dd3), closes #22229
• vue: correctly show ion-back-button when going back (#22260) (39d2530), closes #22217
• vue: hide layout shift on ion-page components (#22254) (2bad1bb), closes #22052
• vue: ion-tab-bar no longer throws undefined error when re-creating tabs (#22261) (d746561), closes #22255

Upgrade Steps

npm install @ionic/[email protected] @ionic/[email protected] --save-exact

New to Ionic Vue?

Check out our Quickstart Guide to get up and running. Then be sure to check out our Building Your First App Guide to learn how build a cross platform Ionic Vue application from start to finish!

Bug Fixes

• button: allow any element type to use the "icon-only" slot (#22168) (c454c84)
• datetime: do not set ampm when the column doesn't exist (#22220) (18fb885), closes #22149
• datetime: remove the automatic switching from am to pm (#22207) (f81d18c), closes #18924 #22171 #22199
• item: properly align datetime and select with fixed or no labels (#22221) (f42c688), closes #18773 #18761 #18779
• label: keep color when focused on a floating or stacked label (#18576) (992580a), closes #18531
• select: do not close popover or set value when switching with arrow keys (#22210) (1878c8e), closes #22179

Bug Fixes

• datetime: do not set ampm when the column doesn't exist (#22224) (210db5b)