Release Notes

Bug Fixes

• button: buttons using fill and color properties now account for hover and focused opacity variables (#23442) (68c0e71), closes #23441
• item: using multiple items with inputs no longer results in console warnings (#23429) (e27b5b6), closes #23427
• vue: IonTabs can now accept IonRouterOutlet, deprecated default router outlet in tabs (#23477) (a2a4cff), closes #23321

Bug Fixes

• modal: swipe to close modal is no longer swipeable on footer (#23401) (ae96563), closes #23398
• title: inherit padding for iOS title in a toolbar (#23343) (82cfa55), closes #23072
• vue: improve v-model integration for Vue 3.1.0+ (#23420) (f008628)
• vue: prevent error from being thrown when testing on certain jest runners (#23421) (60bedb5), closes #23397

Bug Fixes

• action-sheet: subheader no longer overlaps action sheet buttons (#23318) (d473a53), closes #23316
• all: reflect color property as an attribute for vue (#23345) (dc430af), closes #23323
• range: knob can now have an accessible name (#23338) (881dcff), closes #23295
• react: remove @ionic/core dependency in @ionic/react-router to resolve yarn install warning (#23351) (36bfa33), closes #23346
• react: support history@5 in preparation for react router 6 (#23297) (4da5216), closes #23294
• router: guards are now triggered on initial navigation (#23123) (56f6f56), closes #22936
• router: redirects now account for query string (#23337) (08a9f3a), closes #23136
• skeleton-text: animation no longer jumps on large skeleton text elements (#22697) (1a36922), closes #22694
• slides: resolve prototype pollution in swiper v5 (#23344) (a708c41), closes #23342
• title: large title scale animation is now correct in rtl mode (#23372) (3d474ec), closes #23371

Bug Fixes

• angular: warnings are no longer generated when running tests with ng test (#23292) (9cb6c80), closes #19926
• overlays: screen readers no longer read content behind overlays (#23284) (a9b12a5), closes #22714
• refresher: refresher now only activates when pulling down on MD (#23283) (1e1596f), closes #23245
• vue: use correct history mode when doing ssr to avoid errors (#23255) (2e00dab), closes #23254

Bug Fixes

• angular: back button goes back to proper tab on angular 11.2.10 (#23238) (e436439), closes #23230
• react: remove hardware back button event listener when NavManager is unmounted (#23224) (c501da7), closes #23170
• slides: undefined error is no longer thrown after destroying and quickly re-creating ion-slides (#23239) (2ccaabb), closes #22289
• vue: components inside of ion-nav are now unmounted properly (#23240) (f2f41e2), closes #23233
• vue: overlay events can now be listened for without the "on" prefix, deprecated "on" prefix event listeners (#23227) (dab927d)

Bug Fixes

• content: only render a main element when content is being used in primary view (#23160) (2d07d82)
• datetime, input, textarea: only add aria-labelledby if there is an adjacent label (#23211) (a31fb55)
• radio-group: pressing spacebar correctly unselects radio with allow-empty-selection (#23194) (7139b3f), closes #22734
• react: callback refs now work correctly with ionic components (#23152) (0dd189e), closes #23153
• segment, segment-button: use tablist and tab roles (#23145) (91ac340)
• vue: dynamic tabs are now correctly recognized (#23212) (004885b), closes #22847
• vue: update props when navigating to new parameterized route (#23189) (35c8802)

Bug Fixes

• angular: swiping back quickly no longer causes app to get stuck (#23125) (28c52fd), closes #15154
• input: inherit aria-label to input (#23159) (61f094d)
• react: overlays now correctly unmount any child components after dismissing (#23149) (dee6eb3), closes #23140
• react, vue: correct view now chosen when going back inside tabs (#23154) (7203190), closes #23087 #23101
• toggle: prevent click event from firing twice (#23146) (42e6c90), closes #23041
• vue: account for event name changes in vue 3.0.6+ for overlay components (#23100) (27318cf)
• vue: components now integrate properly with vee-validate (#23114) (ba51daf), closes #22886

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

• 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

• 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

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

• alert: follow accessibility guidelines outlined by wai-aria (#22159) (e9b2cc8), closes #21744
• overlays: return focus to presenting element after dismissal (#22167) (cc45ad8), closes #21768
• picker-column: add cancelable check to avoid intervention error in chrome (#22140) (a24a041), closes #22137
• radio: follow accessibility guidelines outlined by wai-aria (#22113) (ea0e049), closes #21743
• reorder: allow click event propagation when reorder group is disabled (#21947) (baafe08), closes #21017
• segment: do not allow text selection on desktop (#22158) (1526bdf)

Performance Improvements

• segment: improve scrolling performance on ios when using segment (#22110) (68afc49), closes #22095

Bug Fixes

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

Bug Fixes

• datetime: remove the automatic switching from am to pm and vice versa (#22208) (0d56c51), closes #18924