mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 14:19:17 +08:00
fix(input): apply position to .cloned-input only for native themes (#30337)
Issue number: resolves internal
---------
## What is the current behavior?
Using the ionic theme, `ion-input` inside an `ion-accordion` , that
require a scroll to focus, when clicked , it's text would shift

After some troubleshooting, we identified this visual bug came from
logic of `addClone`, which creates a clone of the input , in order for
it to be focusable and working on iOS/Android (code
[here](4317da080c/core/src/utils/input-shims/hacks/common.ts (L34))
)
The cloned input has an additional class, `cloned-input` and, for the
ionic theme, the `@position` mixin was causing the cloned input
`inset-inline-start` to be 0, which meant it was not being placed
_exactly_ on top of the "OG" input
## What is the new behavior?
There's no longer a visual bug on inputs inside accordions, when using
the ionic theme
To fix it, we split the `cloned-input` class between the `input.native`
and `input.common` scss files, where the `@position` mixin is only used
in `input.native`
## 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
- Bug reproduction
[here](https://github.com/OutSystems/ui-comp-ionic-sandboxes/tree/ROU-11748-bug)
- With this fix
[here](https://github.com/OutSystems/ui-comp-ionic-sandboxes/tree/ROU-11748)
This commit is contained in:
@ -134,8 +134,6 @@
|
|||||||
// otherwise the .input-cover will not be rendered at all
|
// otherwise the .input-cover will not be rendered at all
|
||||||
// The input cover is not clickable when the input is disabled
|
// The input cover is not clickable when the input is disabled
|
||||||
.cloned-input {
|
.cloned-input {
|
||||||
@include position(0, null, 0, 0);
|
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|||||||
@ -29,6 +29,12 @@
|
|||||||
--highlight-color-focused: #{current-color(base)};
|
--highlight-color-focused: #{current-color(base)};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Input Cover: Unfocused
|
||||||
|
// --------------------------------------------------
|
||||||
|
.cloned-input {
|
||||||
|
@include position(0, null, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
// Input Wrapper
|
// Input Wrapper
|
||||||
// ----------------------------------------------------------------
|
// ----------------------------------------------------------------
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user