Issue number: resolves #internal
---------
<!-- 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. -->
Currently, if you use keyboard navigation to move between dual range
slider knobs, only the first knob you navigate to is highlighted. This
is because both elements in the same component are marked as focusable
and the code that manages focusable doesn't take into account multiple
elements in the same component.
https://github.com/user-attachments/assets/36d84eed-6928-446e-becd-ffa2a97e3cc2
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
After these changes, we manage focusing on dual knob range sliders
manually, so using tab navigation through dual knob range sliders
focuses knobs as expected.
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
[Test - Range - Basic
screen](https://ionic-framework-git-fw-6401-ionic1.vercel.app/src/components/range/test/basic)
Issue number: resolves#29499
---------
## What is the current behavior?
Using the bundled version of Ionic results in an error `Uncaught (in
promise) Error: "undefined" is not a valid value for [side]. Use "start"
or "end" instead.` with `<ion-item-sliding>`.
Reproduction 1:
- https://stackblitz.com/edit/stackblitz-starters-mezoy6?file=index.html
- Press the Add (`+`) button several times
It is also reproducible in an Ionic Angular app when installed via npm.
Reproduction 2:
-
https://stackblitz.com/edit/angular-exwgke?file=src%2Fapp%2Fexample.component.ts
- Press the `Add Items` button several times
## What is the new behavior?
Check for the side attribute to avoid `side` being `undefined`.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Dev build: `8.6.1-dev.11749562115.1e681558`
Test PR: https://github.com/ionic-team/ionic-framework/pull/30469
The tests must be merged separately, after this is released, in order to
use the fix from the CDN.
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: resolves#30468
---------
<!-- 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. -->
Currently, if you use pointer events to drag the content of a sheet
modal with `expandToScroll` disabled and have you have a footer and a
dismiss button, then you use the dismiss button to close the modal, the
footer will be stuck in its pinned position at the bottom of the screen.
Additionally, if you have multiple footers, only one of them properly
gets pinned and unpinned.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- We now move footers back to their stationary position when we finish
our drag event on modal content
- We support pinning and unpinning multiple footers at the same time now
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## 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: `8.6.1-dev.11749575087.1b86eb67`
Issue number: resolves several (listed at the bottom) + internal
---------
<!-- 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. -->
Currently, when expand to scroll is disabled in a sheet modal, we
duplicate the footer on drag and show a cloned version in the shadow DOM
instead of the original. This causes many issues (described in the Other
Information section), especially because often times the cloned version
of the footer would stick around instead of the original version, which
made any event listeners in the footer (and styling) broken by default
instead of only while dragging.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
We are now following [method 2 of the design
doc](https://github.com/ionic-team/ionic-framework-design-documents/blob/main/projects/ionic-framework/components/modal/0003-sheet-modal-scroll.md#approach-2-move-the-footer),
with minor deviation.
Now we try to eliminate the shaky behavior in the footer by setting the
footer to be absolutely positioned on the page and adding padding to the
bottom of the modal while dragging is happening to offset the missing
footer content. We are additionally performing some extra logic to swap
back when the modal is dragged below the height of the footer so that it
collapses correctly visually.
Note this is a minor variation in method two from the design doc because
I moved the footer to the body instead of to the parent modal. This is
because the parent modal will prevent anything not in its ion-page from
displaying, but it seems to work fine. As a side-effect of this, I had
to add an extra class and support for that class in a few areas so we
could identify footers that belonged to modals while they were moving
and apply applicable classes.
Additionally with this change I was able to remove all of the extra code
in the leave/enter animations because we no longer need to worry about
managing a clone of an element there. This allows me to contain all code
relating to behavior of the footer to `sheet.ts`.
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
This refactor in how the footer combats shakiness should resolve many
issues caused by the previous implementation, including the following:
- this change no longer has the footer being swapped out, effectively
breaking event listeners, which fixes#30315
- this change no longer has the footer being duplicated at all, which
fixes#30341
- this change no longer has the footer (sometimes) being moved to the
shadow DOM, which fixes#30312
**Current dev build**: `8.5.8-dev.11748530383.18b4e301`
---------
Co-authored-by: Israel de la Barrera <israeldlbarreral@pm.me>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Properly handle autofill by detecting when the input value exceeds one character in the `onInput` handler and distributing the value across all input fields.
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: resolves#29094
---------
<!-- 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. -->
When assigning multiple selected dates that span different months, the
date time will not set the correct working parts and instead fallback to
the default date: May 28, 2021.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
When opening the datetime with multiple dates selected, the calendar
will animate to the last value in the array of selected dates.
If the datetime is collapsed, body is not visible, is not a grid view or
the user has made a selection of a new date, the calendar will not
animate and instead will set the working parts to the current value
selected (latest/last value).
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Internally we discussed setting the month view to the first value in the
array. Upon further investigation I determined this is not the expected
behavior. When a user interacts with multiple date selection, the most
recent selection (their active view) is the **last** value in the array.
Animating or updating the working parts to the first value in the array
would result in the calendar month jumping after every selection. Using
the last index of the array results in no odd jumps in the experience.
If a developer wishes to configure this behavior, they can change the
order of the values in the value assigned to the datetime (to cause a
specific month/date to be the initial view).
Dev build: `8.5.8-dev.11748388365.11ad9dfe`
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Adds a new component `ion-input-otp` which provides the OTP input functionality
- Displays as an input group with multiple boxes accepting a single character
- Accepts `type` which determines whether the boxes accept numbers or text/numbers and determines the keyboard to display
- Supports changing the displayed keyboard using the `inputmode` property
- Accepts a `length` property to control the number of input boxes
- Accepts the following properties to change the design: `fill`, `shape`, `size`, `color`
- Accepts a `separators` property to show a separator between 1 or more input boxes
- Supports the `disabled`, `readonly` and invalid states
- Supports limiting the accepted input via the `pattern` property
- Emits the following events: `ionInput`, `ionChange`, `ionComplete`, `ionBlur`, `ionFocus`
- Exposes the following method: `setFocus`
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Shane <shane@shanessite.net>
Issue number: internal
---------
<!-- 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. -->
The `ion-input-password-toggle` has aria attributes that are updated
based on the value visibility. However, those values do not reflect on
the native button. This leads to the screen readers to not announce
correctly.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The aria attributes now reflects correctly within the native button.
- The `aria-label` has been updated to indicate the state of visibility.
- Added tests.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
[Preview](https://ionic-framework-git-fw-6525-ionic1.vercel.app/src/components/input-password-toggle/test/basic)
Issue number: resolves#30165
---------
<!-- 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. -->
Currently, several components will trigger their `onClick` twice if you
click on their labels.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
After this fix, the affected components will only trigger `onClick` once
per click of their labels or click directly on the element.
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
The affected components are:
- Checkbox
- Select
- Textarea
- Toggle
- Input
I also tested radio and range but could not reproduce the issue for
them.
Note that two of the components, checkbox and toggle, had to have
special implementations for both their test and fix because of how the
host component acts as the component for accessibility purposes.
Current dev build: `8.5.7-dev.11746044124.147aab6c`
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Issue number: resolves#29758resolves#29761
---------
## What is the current behavior?
When an `ion-item` has a click event listener, the following issues
occur:
1. **Double Click Events**:
- Clicking the padding around interactive elements (`ion-checkbox`,
`ion-toggle`, `ion-radio`, `ion-textarea`, `ion-input`) triggers the
click event twice.
2. **Incorrect Event Targets**:
- For `ion-input` and `ion-textarea`, clicking their native inputs
reports the wrong element as the event target.
- Clicking the padding within the `native-wrapper` of `ion-input` emits
a separate click event with an incorrect target element.
## What is the new behavior?
- Fires `firstInteractive.click()` in Item for all interactives (no
longer excludes input/textarea).
- Stops immediate propagation in item when the click event is in the
padding of an item, preventing two click events from firing.
- Updates input and textarea to always emit from their host elements
`ion-input`/`ion-textarea` instead of the native input elements.
- Updates input to make the native input take up 100% height. This is
necessary to avoid the `native-wrapper` triggering its own click event
when clicking on its padding.
- Adds e2e tests to check for the above behavior to avoid future
regressions.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
**Dev build**: `8.5.6-dev.11745613928.16440384`
**Previews**:
- [Checkbox
Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/checkbox/test/item)
- [Input
Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/input/test/item)
- [Radio
Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/radio/test/item)
- [Select
Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/select/test/item)
- [Textarea
Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/textarea/test/item)
- [Toggle
Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/toggle/test/item)
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
We have shipped various of improvements to the Stencil project and
runtime. You can take a close look at our
[changelog](https://github.com/ionic-team/stencil/blob/main/CHANGELOG.md)
but since `v4.20.0` we mainly shipped improvements on the following
issues:
## Major Improvements:
- Enhanced Shadow DOM and hydration support
- Improved client-side hydration for SSR
- Better handling of shadow root styles and component hydration
- More reliable serialization of Shadow DOM components
## Key Bug Fixes:
- Resolved performance issues due to detached nodes in memory
- Fixed several critical issues with scoped slots and component styling
- Improved handling of SVG class attributes and template tags
- Enhanced runtime decorator functionality
- Better handling of form-associated callbacks
## Technical Updates:
- Updated to TypeScript 5.5
- Added support for customizable Mermaid diagram colors in documentation
I don't see any critical changes that may impact Ionic users and feel
confident we can ship this.
## Dev Build
`8.5.4-dev.11744646756.1244bf71`
---------
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Issue number: internal
---------
<!-- 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. -->
There are a few items to note:
- Styles are using a non-existing focus class. It currently uses
`.has-focus` which isn't being used anywhere within `select.tsx`. It
seems that `.has-focus` comes a copy and paste that wasn't updated.
- Icon uses the highlight color when expanded, in item, and no fill.
This leads to the styling looking weird compared to when it's not in an
item especially since labels do not change colors. Only applies to `md`
mode.
| List no lines | List with lines |
| --- | ----------- |
| 
| 
|
- The focus without a validation status does not update the border
correctly when inside an item and has a solid fill. Only applies to `md`
mode.
| Outside item | Inside item |
|--------|--------|
| 
| 
|
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Styles are now using the correct focus class: `.has-focus`, removing
`ion-focused`.
- If the select is inside an item and has no fill then the icon will not
use the highlight color. Only applies to `md` mode.
| List no lines | List with lines |
| --- | ----------- |
| 
| 
|
- The focus without a validation status uses the highlight color when
inside an item and has a solid fill. Only applies to `md` mode.
| Outside item | Inside item |
|--------|--------|
| 
| 
|
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## 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: `8.5.4-dev.11744743162.1ec9251d`
Select cannot have a focused class and an expanded class at the same
time. It's one or the other.
---------
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Issue number: internal
---------
## What is the current behavior?
- `LogLevel` throws error `Error: Cannot access ambient const enums when
'isolatedModules' is enabled`
- Several existing console warns and errors are not calling the function
that respects the `logLevel` config
## What is the new behavior?
- Remove `const` from the `enum` to work with `isolatedModules`
- Update `console.warn`s to `printIonWarning`
- Update `console.error`s to `printIonError`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Dev build: `8.5.5-dev.11744729748.174bf7e0`
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: resolves#30356
---------
<!-- 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?
Cannot use expandToScroll property in ModalController.create
## What is the new behavior?
ExpandToScroll can be added without syntax problems
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
Issue number: resolves internal
---------
<!-- 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. -->
Currently, MacOS voice over on Safari does not recognize ion-toggle
correctly and fails to highlight the element properly
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
By adding the role property to the host element, we're correctly
identifying the toggle so Safari knows how to handle it.
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
