From 97f96b4528e968e68c4977c9b31489ac0b5642c7 Mon Sep 17 00:00:00 2001
From: Marta Carlos <101343976+OS-martacarlos@users.noreply.github.com>
Date: Mon, 7 Apr 2025 15:37:41 +0100
Subject: [PATCH] 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)
---
 core/src/components/input/input.common.scss | 2 --
 core/src/components/input/input.native.scss | 6 ++++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/core/src/components/input/input.common.scss b/core/src/components/input/input.common.scss
index 91e9218c72..c00e73c485 100644
--- a/core/src/components/input/input.common.scss
+++ b/core/src/components/input/input.common.scss
@@ -134,8 +134,6 @@
 // otherwise the .input-cover will not be rendered at all
 // The input cover is not clickable when the input is disabled
 .cloned-input {
-  @include position(0, null, 0, 0);
-
   position: absolute;
 
   pointer-events: none;
diff --git a/core/src/components/input/input.native.scss b/core/src/components/input/input.native.scss
index a2066bd52f..98a78fe9f3 100644
--- a/core/src/components/input/input.native.scss
+++ b/core/src/components/input/input.native.scss
@@ -29,6 +29,12 @@
   --highlight-color-focused: #{current-color(base)};
 }
 
+// Input Cover: Unfocused
+// --------------------------------------------------
+.cloned-input {
+  @include position(0, null, 0, 0);
+}
+
 // Input Wrapper
 // ----------------------------------------------------------------