fix(input): prevent placeholder from overlapping start slot during scroll assist

Author: ShaneK

core/src/components/input/input.scss

@@ -165,10 +165,10 @@
 // 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;
 
+  // Position is set in JS to match the native input's offset.
+
   pointer-events: none;
 }
 

core/src/components/textarea/textarea.scss

@@ -205,10 +205,10 @@
 // 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;
 
+  // Position is set in JS to match the native input's offset.
+
   pointer-events: none;
 }
 

core/src/utils/input-shims/hacks/common.ts

@@ -68,11 +68,28 @@ const addClone = (
   if (disabledClonedInput) {
     clonedEl.disabled = true;
   }
+
+  /**
+   * Position the clone at the same offset as the native input to prevent the
+   * placeholder from overlapping start slot content (e.g., icons).
+   */
+  const doc = componentEl.ownerDocument!;
+  const isRTL = doc.dir === 'rtl';
+
+  clonedEl.style.top = `${inputEl.offsetTop}px`;
+
+  if (isRTL) {
+    const parentWidth = (parentEl as HTMLElement).offsetWidth;
+    const inputRight = parentWidth - inputEl.offsetLeft - inputEl.offsetWidth;
+    clonedEl.style.right = `${inputRight}px`;
+  } else {
+    clonedEl.style.left = `${inputEl.offsetLeft}px`;
+  }
+
   parentEl.appendChild(clonedEl);
   cloneMap.set(componentEl, clonedEl);
 
-  const doc = componentEl.ownerDocument!;
-  const tx = doc.dir === 'rtl' ? 9999 : -9999;
+  const tx = isRTL ? 9999 : -9999;
   componentEl.style.pointerEvents = 'none';
   inputEl.style.transform = `translate3d(${tx}px,${inputRelativeY}px,0) scale(0)`;
 };