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>
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. -->
Issue number: resolves#30255
---------
## What is the current behavior?
`LogLevel` is not properly exported
## What is the new behavior?
Exports `LogLevel` in core
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Dev build: `8.5.4-dev.11743715474.1eadbd25`
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: resolves#30001
---------
<!-- 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 segment view has content that is long enough to render outside of
the viewport, then a user can scroll vertically and horizontally when
the user scrolled down to see the content at the bottom. This causes
disorientation as scrolling should only be in one direction.
This only happens on a mobile device, specifically Android. It can be
reproduce with a browser simulator.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated styling to take into account that content might be outside of
the viewport.
## 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.2-dev.11743531350.19e040aa`
Issue number: resolves#30112
---------
<!-- 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?
When toast is presented, the `backdrop-no-scroll` class is added to the
body when using Frameworks like Angular. It should not add this class as
toast does not be setting focus trap as mentioned in the
[comments](1cfa915e8f/core/src/utils/overlays.ts (L514-L520)).
## What is the new behavior?
- Class is only added when the overlay that is presented is not a toast
component.
- Test was added.
## 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
N/A
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
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-checkbox
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 ion-checkbox as a checkbox 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. -->
---------
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
## What is the new behavior?
Adds a landing page to the Angular test app to make it easier to get to
and debug standalone.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
- Adjusted the `selectMultiColumn` logic to handle keyboard values like
20 and 22 dynamically.
- Introduced checks for the maximum column value to enable flexible
input behavior.
- Added e2e tests to verify correct value selection for both 12-hour and
24-hour formats.
Issue number: resolves#28877
---------
## What is the current behavior?
In the ion-datetime component, when typing 2000 in the keyboard the
resulted time value is 02:00 (in 24-hour format)
Examples:
https://forum.ionicframework.com/t/ion-datetime-disable-opening-keyboard/224558/6?u=dennisskylegs
## What is the new behavior?
In the ion-datetime component, when typing 2000 in the keyboard the
resulted time value is 20:00 (in 24-hour format)
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: ShaneK <shane@shanessite.net>
Issue number: N/A
---------
<!-- 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. -->
Segment buttons do not consistently set themselves to a disabled state.
When disabling them and rapidly refreshing the page, their state may
vary—sometimes they appear disabled, and other times they do not.
This was due to this
[PR](https://github.com/ionic-team/ionic-framework/pull/30138). The
reason that this PR was created was due to the console errors being
shown too early when segment buttons and contents were dynamically
rendered.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- I reverted the changes added through the other PR since the
`setTimeout` was causing the inconsistency.
- By moving the console errors to `componentWillLoad`, it provides
`ion-segment-content` time to render before the console errors are
thrown.
## 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.2-dev.11742514102.1b51674d`
How to test:
1. Run the server locally
2. Navigate to the [segment view
disabled](http://localhost:3333/src/components/segment-view/test/disabled)
page
3. Verify that the "Paid", "Free", and "Top" buttons disabled
4. Rapid fire some hard refreshes
5. Verify that the "Paid", "Free", and "Top" buttons disabled
6. Navigate to this StackBlitz
[repro](https://stackblitz.com/edit/yhktpj19-wxmxpmw7?file=src%2Fmain.tsx)
7. Install the dev build: `npm i
@ionic/react@8.5.2-dev.11742514102.1b51674d
@ionic/react-router@8.5.2-dev.11742514102.1b51674d`
8. Open the console log
9. Click on the "Add last child" button
10. Verify that there are no console errors like `Segment Button: Unable
to find Segment Content with id="content3".`
Issue number: resolves#29619
---------
<!-- 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 `ionInput` emits for range even when the value hasn't changed. This
does not match our documentation. It should only emit when the value
changes (and continuously while the user is dragging the knob).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Moved the emitter to the value watch function, to determine if the
value has changed.
- Added a test
-
## 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. -->
How to test:
1. Navigate to the [range basic HTML
file](8ed08fcba5/core/src/components/range/test/basic/index.html (L77))
2. Add the following script
```
const ionicRanges = document.querySelectorAll('ion-range');
ionicRanges.forEach(range => {
range.addEventListener('ionInput', function(ev) {
console.log('ionInput', ev.currentTarget.value);
});
});
```
3. Navigate to the [range test
page](http://localhost:3333/src/components/range/test/basic)
4. Open the console
5. Move the single knob range (let go when you're done)
6. Verify that the value is shown in the console
7. Tap as close to the middle of the knob. The goal is to tap it without
the value moving.
8. Verify that the value does not show in the console
---------
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
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 the standalone test app for router-link in Angular imports all
of `RouterModule` when it only needs to import `RouterLink` from
`@angular/router`
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Now, the Angular test app will import only what it needs from router
instead of over-importing.
## 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. -->
This PR helps align our Angular test apps with a more real-world
implementation expectation
