Skip to content

Commit 97f96b4

Browse files
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 ![Screenshot 2025-04-04 at 12 32 22](https://github.com/user-attachments/assets/94152b22-4dcf-47bc-a911-03b4270e6f9f) 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](https://github.com/ionic-team/ionic-framework/blob/4317da080ca26a27575a7f7905d2703c89b685cc/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)
1 parent 9016cc6 commit 97f96b4

File tree

2 files changed

+6
-2
lines changed

2 files changed

+6
-2
lines changed

core/src/components/input/input.common.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,8 +134,6 @@
134134
// otherwise the .input-cover will not be rendered at all
135135
// The input cover is not clickable when the input is disabled
136136
.cloned-input {
137-
@include position(0, null, 0, 0);
138-
139137
position: absolute;
140138

141139
pointer-events: none;

core/src/components/input/input.native.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@
2929
--highlight-color-focused: #{current-color(base)};
3030
}
3131

32+
// Input Cover: Unfocused
33+
// --------------------------------------------------
34+
.cloned-input {
35+
@include position(0, null, 0, 0);
36+
}
37+
3238
// Input Wrapper
3339
// ----------------------------------------------------------------
3440

0 commit comments

Comments
 (0)