Release Notes

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 reset to am when changing hour and pm is set (#21997) (8b85fe0), closes #19175 #19260 #20026 #16630
• input: only focus the first input / textarea when clicking on the parent item (#22049) (99f2532), closes #22037 #22032
• react: Keep a hold of previous routes when doing a redirect, closes #22053 (74af3cb)
• react: redirect routes should unmount leaving component, fixes #22022 (#22029) (b11e06c)
• textarea: do not generate duplicate IDs between ion-input and ion-textarea (#22074) (c72c7ff), closes #21542

Bug Fixes

• input: improve reliability of scroll assist when accessory bar is enabled (#21936) (22477fb), closes #21912
• input: properly focus the input when clicking the item padding in WebKit (#21930) (e4964ff), closes #21509
• input: remain focused in the input after pressing the clear button (#21985) (6878fb9), closes #21549
• label: use translateY so input caret shows up due to webkit issue (#21949) (00eac33), closes #21943
• overlays: prevent focus from being stolen when presenting another overlay from within a modal (#21856) (5c177d7), closes #21840
• range: properly display stacked labels in an item with a range (#21944) (9f4b01e), closes #21625
• react: export correct animation types (#21950) (36e4bf7)
• react: removed exporting of ionRenderToString to decrease bundle size, closes #21917 (#21928) (434befe)
• react: setting active tab properly on mount, closes #21830 (#21833) (f58424f)
• react: fix tab currentHref when changing tabs, closes #21834 (#21835) (74468ab)

Bug Fixes

• react: properly extend HTMLElement for tabs (bfddb17), closes #21803

Bug Fixes

• angular: expose createAnimation in addition to AnimationController (#21616) (a5b3750), closes #21615
• select: change role to listbox (#21609) (8c79e2c)
• slides: enable keyboard integration (#21608) (26674f1), closes #21554
• textarea: add aria-labelledby to native textarea (#21606) (88f23b1), closes #21600

Bug Fixes

• action-sheet, alert: resolve double click issue when running in iOS mode on chrome (#21506) (bcccc21), closes #21503
• angular: fix issue where navAnimation was being incorrectly overridden (#21508) (e968bd0), closes #21495
• input: add aria-label to clear button (#21538) (d8b377f), closes #21537
• ios: respect toolbar opacity when doing nav transition (#21512) (24cfdc3)
• segment: ensure checked classes get set after not having a value (#21547) (17308f2), closes #21546

Bug Fixes

• angular: resolve error when not using ngModel on components (4083e32)

Bug Fixes

• all: improve scroll assist reliability for below the fold inputs (#21206) (7166a29)
• all: overlay components no longer display outline when focused (#21226) (bb62023)
• display: remove 1px gap between mutually exclusive breakpoints (#21276) (703ef5c), closes #20993 #20743
• header: do not error on collapsible header on devices that do not support IntersectionObserve (#21222) (0c13f25)
• input: check for tabindex and pass it properly to native input (#21170) (dd4cb70), closes #17515
• ios: position page transition shadow properly under footer (#21095) (50678c0)
• md: do not hide page when swipe gesture is cancelled (#21247) (f334e83)
• overlays: respect keyboardClose property when opening overlays (#21240) (9d0dcbb)
• picker: haptics now work properly (#21268) (8e11ecc)
• refresher: correctly select shadow root on older browsers (#21237) (f23f1cb)
• refresher: refresher completes even after switching to a new tab (#21236) (1e6f923)
• segment-button: screen readers now announce selected state properly (#21273) (85cc35e)
• toggle: screen readers now announce toggle properly (#21168) (1fbdb22)

Bug Fixes

• modal: properly target card modal for iPadOS styles (#20884) (5816cf5)

Bug Fixes

• all: only warn invalid mode if used on an ionic component (#20828) (6ed1c51), closes #20055
• all: properly scroll to input with scroll assist (#20742) (e24060e), closes #19589
• angular: export Animation and Gesture related types (#20766) (2ece194)
• angular: respect animation property for ion-router-outlet (#20767) (f2dbe1f), closes #20764
• content: apply --offset-top and --offset-bottom values correctly (#20790) (2707289), closes #20735
• content: set overscroll-behavior based on the scroll direction (#20011) (a3fc77b), closes #20010
• item-divider: update design to match native iOS (#20854) (d91e22d)
• item-sliding: account for swipe to go back gesture when opening item-options (#20777) (f23ac44), closes #20773
• list: show bottom border on last item in a list followed by a list (#20798) (7bc5191)
• modal: backdrop and box shadows no longer stack when opening multiple modals (#20801) (253cd96), closes #20800
• modal: backdrop is no longer tappable on card-style modal on smaller screens (#20802) (12932dd), closes #20783
• modal: properly apply border radius on card-style modal (#20852) (dff3816), closes #20851
• modal: properly remove safe area padding on card-modal (#20853) (71f1182), closes #20799
• modal: respect card-style modal spec for iPadOS (#20750) (75bae40), closes #20700
• react: expose correct type for CreateAnimation (#20775) (0897c3f), closes #20771
• refresher: properly dismiss refresher when completed synchronously (#20815) (b1a87c8), closes #20803
• segment: automatically expand width for scrollable segment buttons (#20763) (cdfd50b), closes #20566
• segment: scrollable segments only show scrollbar if they overflow (#20760) (ab146c9), closes #20758
• slides: check that mutation observer is defined for ssr (#20791) (2d5d251)
• textarea: properly adjust auto-grow textarea in scrolled content (#19776) (8bd5bac), closes #19193
• title: improve reliability of large title ios nav transition (#20861) (3bd6b5d)
• title: large title now inherits global color styling during nav transition (#20862) (321140f)

Bug Fixes

• button: allow overflow to be overridden by the CSS variable (#20738) (7ecde36), closes #20726
• datetime: account for max property when hour, minute, or second is set to 0 (#20665) (2177461), closes #20652
• header: collapsable header should default to using content background (#20736) (f6c3ba7), closes #20691
• header: resolve undefined error on collapsible header when navigating quickly (#20728) (87a2721), closes #20725
• ios: large title animation now works properly in a modal (#20703) (ec4878a), closes #20696
• item: apply proper margin left for slotted icon in RTL (#20684) (d53595e), closes #20653
• label: text overflow for slotted headings (#20690) (4d34ce6), closes #17087
• modal: leave animation transitions modal completely out of viewport on ipad (#20702) (22d5256), closes #20697
• angular exclude components from ssr (#20674) (f64b142)
• modal: swipeable modal now works in firefox (#20714) (7d260b9), closes #20706
• overlays: prevent accidental dismiss of overlays when tapping screen twice (#20683) (b6c2a77), closes #20608
• segment: allow routerLink to work on segment buttons (#20682) (314dbb1), closes #20678
• segment: iOS mode segment now works on older Android devices (#20673) (44993b7), closes #20648

Bug Fixes

• animation: reset all temporary flags when interrupting an animation (#20627) (0e0e401), closes #20602
• buttons: use proper button colors based on CSS variables when inside of a toolbar (#20633) (c1d7bf2)

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

Bug Fixes

• datetime: do not reset to am when changing the hour and pm is set (#22016) (1dac5a4), closes #19175 #19260 #20026 #16630