@onekeyfe/react-native-auto-size-input 1.1.28 → 1.1.29

package/android/src/main/java/com/margelo/nitro/autosizeinput/AutoSizeInput.kt

@@ -2,7 +2,9 @@ package com.margelo.nitro.autosizeinput
 
 import android.graphics.Color
 import android.graphics.Paint
+import android.graphics.Rect
 import android.graphics.Typeface
+import android.graphics.drawable.GradientDrawable
 import android.text.Editable
 import android.text.InputType
 import android.view.inputmethod.EditorInfo
@@ -116,7 +118,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       recalculateFontSize()
     }
 
-  override var multiline: Boolean?
+  override var multiline: Boolean? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -124,7 +126,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       updateInputMode()
     }
 
-  override var maxNumberOfLines: Double?
+  override var maxNumberOfLines: Double? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -132,7 +134,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       recalculateFontSize()
     }
 
-  override var textColor: String?
+  override var textColor: String? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -143,7 +145,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       if (suffixColor == null) suffixView.setTextColor(color)
     }
 
-  override var prefixColor: String?
+  override var prefixColor: String? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -151,7 +153,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       prefixView.setTextColor(parseColor(value) ?: parseColor(textColor) ?: Color.BLACK)
     }
 
-  override var suffixColor: String?
+  override var suffixColor: String? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -159,7 +161,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       suffixView.setTextColor(parseColor(value) ?: parseColor(textColor) ?: Color.BLACK)
     }
 
-  override var placeholderColor: String?
+  override var placeholderColor: String? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -167,7 +169,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       inputView.setHintTextColor(parseColor(value) ?: Color.GRAY)
     }
 
-  override var textAlign: String?
+  override var textAlign: String? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -180,7 +182,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       inputView.gravity = gravity
     }
 
-  override var fontFamily: String?
+  override var fontFamily: String? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -188,7 +190,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       recalculateFontSize()
     }
 
-  override var fontWeight: String?
+  override var fontWeight: String? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -196,7 +198,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       recalculateFontSize()
     }
 
-  override var editable: Boolean?
+  override var editable: Boolean? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -207,7 +209,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       inputView.isCursorVisible = isEditable
     }
 
-  override var keyboardType: String?
+  override var keyboardType: String? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -221,7 +223,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       }
     }
 
-  override var returnKeyType: String?
+  override var returnKeyType: String? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -236,7 +238,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       }
     }
 
-  override var autoCorrect: Boolean?
+  override var autoCorrect: Boolean? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -249,7 +251,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       }
     }
 
-  override var autoCapitalize: String?
+  override var autoCapitalize: String? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -269,7 +271,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       inputView.inputType = cleared or capFlag
     }
 
-  override var selectionColor: String?
+  override var selectionColor: String? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -286,7 +288,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       }
     }
 
-  override var prefixMarginRight: Double?
+  override var prefixMarginRight: Double? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -294,7 +296,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       view.requestLayout()
     }
 
-  override var suffixMarginLeft: Double?
+  override var suffixMarginLeft: Double? = null
     get() = field
     set(value) {
       if (isDisposed) return
@@ -302,6 +304,31 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       view.requestLayout()
     }
 
+  override var showBorder: Boolean? = null
+    get() = field
+    set(value) {
+      if (isDisposed) return
+      field = value
+      updateInputAppearance()
+    }
+
+  override var inputBackgroundColor: String? = null
+    get() = field
+    set(value) {
+      if (isDisposed) return
+      field = value
+      updateInputAppearance()
+    }
+
+  override var contentAutoWidth: Boolean? = null
+    get() = field
+    set(value) {
+      if (isDisposed) return
+      field = value
+      view.requestLayout()
+    }
+
+
   override var onChangeText: ((String) -> Unit)? = null
   override var onFocus: (() -> Unit)? = null
   override var onBlur: (() -> Unit)? = null
@@ -314,10 +341,18 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
     // Configure prefix
     prefixView.visibility = View.GONE
     prefixView.includeFontPadding = false
+    prefixView.isSingleLine = true
+    prefixView.maxLines = 1
+    prefixView.setHorizontallyScrolling(true)
+    prefixView.gravity = Gravity.CENTER_VERTICAL
 
     // Configure suffix
     suffixView.visibility = View.GONE
     suffixView.includeFontPadding = false
+    suffixView.isSingleLine = true
+    suffixView.maxLines = 1
+    suffixView.setHorizontallyScrolling(true)
+    suffixView.gravity = Gravity.CENTER_VERTICAL
 
     // Configure input
     inputView.background = null
@@ -325,6 +360,10 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
     inputView.includeFontPadding = false
     inputView.isSingleLine = true
     inputView.maxLines = 1
+    inputView.setHorizontallyScrolling(true)
+    inputView.isVerticalScrollBarEnabled = false
+    inputView.overScrollMode = View.OVER_SCROLL_NEVER
+    inputView.gravity = Gravity.CENTER_VERTICAL or Gravity.START
     inputView.addTextChangedListener(textWatcher)
 
     inputView.setOnFocusChangeListener { _, hasFocus ->
@@ -332,10 +371,22 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
       if (hasFocus) onFocus?.invoke() else onBlur?.invoke()
     }
 
+    // Make the whole composed area (prefix + input + suffix) tappable for focus.
+    val focusFromContainer = View.OnClickListener {
+      if (isDisposed || editable == false) return@OnClickListener
+      requestInputFocus()
+    }
+    view.isClickable = true
+    view.setOnClickListener(focusFromContainer)
+    prefixView.setOnClickListener(focusFromContainer)
+    inputView.setOnClickListener(focusFromContainer)
+    suffixView.setOnClickListener(focusFromContainer)
+
     // Add to container
     (view as ViewGroup).addView(prefixView)
     (view as ViewGroup).addView(inputView)
     (view as ViewGroup).addView(suffixView)
+    updateInputAppearance()
   }
 
   private fun updateInputMode() {
@@ -356,43 +407,78 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
     if (width <= 0 || height <= 0) return
 
     val density = context.resources.displayMetrics.density
+    val edgeInset = (2f * density).toInt()
 
     // Measure prefix
     val prefixW = if (prefixView.visibility == View.VISIBLE) {
-      prefixView.measure(
-        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.AT_MOST),
-        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY)
-      )
-      prefixView.measuredWidth
+      measureTextViewWidthPx(prefixView)
     } else 0
 
     // Measure suffix
     val suffixW = if (suffixView.visibility == View.VISIBLE) {
-      suffixView.measure(
-        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.AT_MOST),
-        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY)
-      )
-      suffixView.measuredWidth
+      measureTextViewWidthPx(suffixView)
     } else 0
 
     val prefixGap = if (prefixView.visibility == View.VISIBLE) ((prefixMarginRight ?: 0.0) * density).toInt() else 0
     val suffixGap = if (suffixView.visibility == View.VISIBLE) ((suffixMarginLeft ?: 0.0) * density).toInt() else 0
 
-    val inputX = prefixW + prefixGap
-    val inputW = maxOf(width - inputX - suffixW - suffixGap, 0)
+    val inputX = edgeInset + prefixW + prefixGap
+    val isContentAutoWidthEnabled = contentAutoWidth == true && multiline != true
+    val inputW: Int
+    val suffixX: Int
+
+    if (isContentAutoWidthEnabled) {
+      val typedText = inputView.text?.toString() ?: ""
+      val minInputWidth = (24f * density).toInt()
+      val desiredInputWidth = maxOf(measureSingleLineTextWidthPx(typedText), minInputWidth)
+      val suffixSegment = if (suffixView.visibility == View.VISIBLE) suffixGap + suffixW else 0
+      val maxInputWidth = maxOf(width - edgeInset - inputX - suffixSegment, 0)
+      inputW = minOf(desiredInputWidth, maxInputWidth)
+      val desiredSuffixX = if (suffixView.visibility == View.VISIBLE) inputX + inputW + suffixGap else width - edgeInset
+      suffixX = minOf(desiredSuffixX, width - edgeInset - suffixW)
+    } else {
+      inputW = maxOf(width - edgeInset - inputX - suffixW - suffixGap, 0)
+      suffixX = width - edgeInset - suffixW
+    }
 
-    // Layout prefix
-    prefixView.layout(0, 0, prefixW, height)
+    // Re-measure with the exact final slot size before layout.
+    if (prefixView.visibility == View.VISIBLE) {
+      prefixView.measure(
+        View.MeasureSpec.makeMeasureSpec(prefixW, View.MeasureSpec.EXACTLY),
+        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.AT_MOST)
+      )
+    }
+    if (suffixView.visibility == View.VISIBLE) {
+      suffixView.measure(
+        View.MeasureSpec.makeMeasureSpec(suffixW, View.MeasureSpec.EXACTLY),
+        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.AT_MOST)
+      )
+    }
 
     // Layout input
+    val inputHeightSpec = if (multiline == true) {
+      View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY)
+    } else {
+      View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.AT_MOST)
+    }
     inputView.measure(
       View.MeasureSpec.makeMeasureSpec(inputW, View.MeasureSpec.EXACTLY),
-      View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY)
+      inputHeightSpec
     )
-    inputView.layout(inputX, 0, inputX + inputW, height)
+    val inputH = if (multiline == true) height else inputView.measuredHeight.coerceAtMost(height)
+    val inputTop = if (multiline == true) 0 else ((height - inputH) / 2).coerceAtLeast(0)
+    inputView.layout(inputX, inputTop, inputX + inputW, inputTop + inputH)
+    resetSingleLineVerticalOffset()
+
+    val prefixTop = ((height - prefixView.measuredHeight) / 2).coerceAtLeast(0)
+    val suffixTop = ((height - suffixView.measuredHeight) / 2).coerceAtLeast(0)
+
+    // Layout prefix
+    prefixView.layout(edgeInset, prefixTop, edgeInset + prefixW, prefixTop + prefixView.measuredHeight)
 
     // Layout suffix
-    suffixView.layout(width - suffixW, 0, width, height)
+    suffixView.layout(suffixX, suffixTop, suffixX + suffixW, suffixTop + suffixView.measuredHeight)
+
   }
 
   // MARK: - Font Size Calculation
@@ -400,42 +486,76 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
   private fun recalculateFontSize() {
     if (isDisposed || isRecalculating) return
     isRecalculating = true
+    try {
+      val maxSize = (maxFontSizeProp ?: 48.0).toFloat()
+      val minSize = (minFontSizeProp ?: 16.0).toFloat()
+      val isContentAutoWidthEnabled = contentAutoWidth == true && multiline != true
+      val width = view.width
+      val height = view.height
+      val inputText = inputView.text?.toString() ?: ""
+      if (width <= 0 || height <= 0) {
+        // Keep text size in sync even before first valid layout pass.
+        applyFontSize(maxSize)
+        return
+      }
 
-    val width = view.width
-    val height = view.height
-    if (width <= 0 || height <= 0) {
-      isRecalculating = false
-      return
-    }
+      // In contentAutoWidth mode, prioritize width expansion instead of shrinking text.
+      if (isContentAutoWidthEnabled) {
+        val density = context.resources.displayMetrics.density
+        val edgeInset = (2f * density).toInt()
+        val prefixW = if (prefixView.visibility == View.VISIBLE) measureTextViewWidthPx(prefixView) else 0
+        val suffixW = if (suffixView.visibility == View.VISIBLE) measureTextViewWidthPx(suffixView) else 0
+        val prefixGap = if (prefixView.visibility == View.VISIBLE) ((prefixMarginRight ?: 0.0) * density).toInt() else 0
+        val suffixGap = if (suffixView.visibility == View.VISIBLE) ((suffixMarginLeft ?: 0.0) * density).toInt() else 0
+        val inputX = edgeInset + prefixW + prefixGap
+        val suffixSegment = if (suffixView.visibility == View.VISIBLE) suffixGap + suffixW else 0
+        val maxInputWidth = maxOf(width - edgeInset - inputX - suffixSegment, 0)
+        val textForSizing = if (inputText.isEmpty()) (placeholder ?: "") else inputText
+
+        // Expand width first; once width hits max, shrink font to keep full text visible.
+        val targetSize = if (maxInputWidth <= 0) {
+          minSize
+        } else if (textForSizing.isEmpty()) {
+          maxSize
+        } else {
+          findOptimalFontSizeSingleLine(
+            fullText = textForSizing,
+            availableWidth = maxInputWidth.toFloat(),
+            minSize = minSize,
+            maxSize = maxSize
+          )
+        }
+        applyFontSize(targetSize)
+        return
+      }
 
-    val density = context.resources.displayMetrics.density
-    val maxSize = (maxFontSizeProp ?: 48.0).toFloat()
-    val minSize = (minFontSizeProp ?: 16.0).toFloat()
+      val density = context.resources.displayMetrics.density
 
-    val prefixText = prefix ?: ""
-    val suffixText = suffix ?: ""
-    val inputText = inputView.text?.toString() ?: ""
-    val displayText = if (inputText.isEmpty()) (placeholder ?: "") else inputText
-    val fullText = prefixText + displayText + suffixText
+      val prefixText = prefix ?: ""
+      val suffixText = suffix ?: ""
+      val displayText = if (inputText.isEmpty()) (placeholder ?: "") else inputText
+      val fullText = prefixText + displayText + suffixText
 
-    if (fullText.isEmpty()) {
-      applyFontSize(maxSize)
-      return
-    }
+      if (fullText.isEmpty()) {
+        applyFontSize(maxSize)
+        return
+      }
 
-    val prefixGap = if (prefixView.visibility == View.VISIBLE) ((prefixMarginRight ?: 0.0) * density) else 0.0
-    val suffixGap = if (suffixView.visibility == View.VISIBLE) ((suffixMarginLeft ?: 0.0) * density) else 0.0
-    val availableWidth = width - prefixGap.toFloat() - suffixGap.toFloat()
+      val prefixGap = if (prefixView.visibility == View.VISIBLE) ((prefixMarginRight ?: 0.0) * density) else 0.0
+      val suffixGap = if (suffixView.visibility == View.VISIBLE) ((suffixMarginLeft ?: 0.0) * density) else 0.0
+      val availableWidth = width - prefixGap.toFloat() - suffixGap.toFloat()
 
-    val optimalSize = if (multiline == true) {
-      val maxLines = (maxNumberOfLines ?: 1.0).toInt()
-      findOptimalFontSizeMultiline(fullText, availableWidth, height.toFloat(), maxLines, minSize, maxSize)
-    } else {
-      findOptimalFontSizeSingleLine(fullText, availableWidth, minSize, maxSize)
-    }
+      val optimalSize = if (multiline == true) {
+        val maxLines = (maxNumberOfLines ?: 1.0).toInt()
+        findOptimalFontSizeMultiline(fullText, availableWidth, height.toFloat(), maxLines, minSize, maxSize)
+      } else {
+        findOptimalFontSizeSingleLine(fullText, availableWidth, minSize, maxSize)
+      }
 
-    applyFontSize(optimalSize)
-    isRecalculating = false
+      applyFontSize(optimalSize)
+    } finally {
+      isRecalculating = false
+    }
   }
 
   private fun findOptimalFontSizeSingleLine(
@@ -503,7 +623,12 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
     prefixView.typeface = typeface
     suffixView.setTextSize(TypedValue.COMPLEX_UNIT_SP, size)
     suffixView.typeface = typeface
-    view.requestLayout()
+    resetSingleLineVerticalOffset()
+    if (contentAutoWidth == true && multiline != true && view.width > 0 && view.height > 0) {
+      performLayout(view.width, view.height)
+    } else {
+      view.requestLayout()
+    }
   }
 
   private fun makeTypeface(): Typeface {
@@ -527,9 +652,7 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
 
   override fun focus() {
     if (isDisposed) return
-    inputView.requestFocus()
-    val imm = context.getSystemService(android.content.Context.INPUT_METHOD_SERVICE) as? android.view.inputmethod.InputMethodManager
-    imm?.showSoftInput(inputView, android.view.inputmethod.InputMethodManager.SHOW_IMPLICIT)
+    requestInputFocus()
   }
 
   override fun blur() {
@@ -550,6 +673,58 @@ class HybridAutoSizeInput(val context: ThemedReactContext) : HybridAutoSizeInput
     }
   }
 
+  private fun updateInputAppearance() {
+    val drawable = GradientDrawable()
+    drawable.setColor(parseColor(inputBackgroundColor) ?: Color.TRANSPARENT)
+    if (showBorder == true) {
+      val borderWidthPx = context.resources.displayMetrics.density.toInt().coerceAtLeast(1)
+      drawable.setStroke(borderWidthPx, parseColor(textColor) ?: Color.parseColor("#D1D5DB"))
+    } else {
+      drawable.setStroke(0, Color.TRANSPARENT)
+    }
+    inputView.background = drawable
+  }
+
+  private fun measureSingleLineTextWidthPx(text: String): Int {
+    if (text.isEmpty()) return 0
+    val paint = TextPaint(Paint.ANTI_ALIAS_FLAG)
+    paint.textSize = currentFontSize * context.resources.displayMetrics.scaledDensity
+    paint.typeface = makeTypeface()
+    return kotlin.math.ceil(paint.measureText(text).toDouble()).toInt()
+  }
+
+  private fun measureTextViewWidthPx(textView: TextView): Int {
+    val content = textView.text?.toString().orEmpty()
+    if (content.isEmpty()) return 0
+    val bounds = Rect()
+    textView.paint.getTextBounds(content, 0, content.length, bounds)
+    val advanceWidth = kotlin.math.ceil(textView.paint.measureText(content).toDouble()).toInt()
+    val glyphWidth = bounds.width()
+    textView.measure(
+      View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
+      View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
+    )
+    val desiredWidth = textView.measuredWidth
+    val density = context.resources.displayMetrics.density
+    // Keep extra room for side bearings/kerning to avoid clipping on some glyphs/fonts.
+    val safetyPadding = maxOf((4f * density).toInt(), kotlin.math.ceil(textView.textSize * 0.5f).toInt())
+    val measured = maxOf(maxOf(advanceWidth, glyphWidth), desiredWidth) + safetyPadding
+    return measured
+  }
+
+  private fun requestInputFocus() {
+    inputView.requestFocus()
+    val imm = context.getSystemService(android.content.Context.INPUT_METHOD_SERVICE) as? android.view.inputmethod.InputMethodManager
+    imm?.showSoftInput(inputView, android.view.inputmethod.InputMethodManager.SHOW_IMPLICIT)
+  }
+
+  private fun resetSingleLineVerticalOffset() {
+    if (multiline == true) return
+    if (inputView.scrollY != 0) {
+      inputView.scrollTo(inputView.scrollX, 0)
+    }
+  }
+
   override fun afterUpdate() {
     super.afterUpdate()
     if (!isDisposed) {

package/ios/AutoSizeInput.swift

@@ -14,6 +14,7 @@ class HybridAutoSizeInput: HybridAutoSizeInputSpec {
   private var isRecalculating = false
   private var currentFontSize: CGFloat = 48
   private var inputDelegate: InputDelegate?
+  private var containerTapGesture: UITapGestureRecognizer?
 
   // MARK: - HybridView
   var view: UIView = UIView()
@@ -29,6 +30,7 @@ class HybridAutoSizeInput: HybridAutoSizeInputSpec {
         singleLineInput.text = text ?? ""
       }
       isUpdatingFromJS = false
+      view.setNeedsLayout()
       recalculateFontSize()
     }
   }
@@ -190,6 +192,24 @@ class HybridAutoSizeInput: HybridAutoSizeInputSpec {
     }
   }
 
+  var showBorder: Bool? {
+    didSet {
+      updateInputAppearance()
+    }
+  }
+
+  var inputBackgroundColor: String? {
+    didSet {
+      updateInputAppearance()
+    }
+  }
+
+  var contentAutoWidth: Bool? {
+    didSet {
+      view.setNeedsLayout()
+    }
+  }
+
   var onChangeText: ((String) -> Void)?
   var onFocus: (() -> Void)?
   var onBlur: (() -> Void)?
@@ -227,7 +247,6 @@ class HybridAutoSizeInput: HybridAutoSizeInputSpec {
     multiLineInput.delegate = delegate
     multiLineInput.textContainerInset = .zero
     multiLineInput.textContainer.lineFragmentPadding = 0
-    multiLineInput.backgroundColor = .clear
     multiLineInput.isScrollEnabled = false
     multiLineInput.isHidden = true
 
@@ -249,6 +268,13 @@ class HybridAutoSizeInput: HybridAutoSizeInputSpec {
       subview.removeFromSuperview()
       view.addSubview(subview)
     }
+
+    // Keep input usable when contentAutoWidth starts from 0 width.
+    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleContainerTap))
+    tapGesture.cancelsTouchesInView = false
+    view.addGestureRecognizer(tapGesture)
+    containerTapGesture = tapGesture
+    updateInputAppearance()
   }
 
   private func performLayout() {
@@ -277,13 +303,28 @@ class HybridAutoSizeInput: HybridAutoSizeInputSpec {
     let suffixGap = suffixLabel.isHidden ? 0 : CGFloat(suffixMarginLeft ?? 0)
 
     let inputX = prefixW + prefixGap
-    let inputW = bounds.width - inputX - suffixW - suffixGap
+    let isContentAutoWidthEnabled = contentAutoWidth == true && multiline != true
+    let inputW: CGFloat
+    let suffixX: CGFloat
+
+    if isContentAutoWidthEnabled {
+      let typedText = singleLineInput.text ?? ""
+      let desiredInputWidth = measuredSingleLineTextWidth(typedText, font: singleLineInput.font)
+      let suffixSegment = suffixLabel.isHidden ? 0 : (suffixGap + suffixW)
+      let maxInputWidth = max(bounds.width - inputX - suffixSegment, 0)
+      inputW = min(desiredInputWidth, maxInputWidth)
+      let desiredSuffixX = suffixLabel.isHidden ? bounds.width : (inputX + inputW + suffixGap)
+      suffixX = min(desiredSuffixX, bounds.width - suffixW)
+    } else {
+      inputW = max(bounds.width - inputX - suffixW - suffixGap, 0)
+      suffixX = bounds.width - suffixW
+    }
 
     prefixLabel.frame = CGRect(x: 0, y: 0, width: prefixW, height: bounds.height)
-    suffixLabel.frame = CGRect(x: bounds.width - suffixW, y: 0, width: suffixW, height: bounds.height)
+    suffixLabel.frame = CGRect(x: suffixX, y: 0, width: suffixW, height: bounds.height)
 
     let activeInput: UIView = (multiline == true) ? multiLineInput : singleLineInput
-    activeInput.frame = CGRect(x: inputX, y: 0, width: max(inputW, 0), height: bounds.height)
+    activeInput.frame = CGRect(x: inputX, y: 0, width: inputW, height: bounds.height)
   }
 
   private func updateInputMode() {
@@ -472,12 +513,14 @@ class HybridAutoSizeInput: HybridAutoSizeInputSpec {
 
   fileprivate func handleTextFieldChange(_ textField: UITextField) {
     guard !isUpdatingFromJS else { return }
+    view.setNeedsLayout()
     recalculateFontSize()
     onChangeText?(textField.text ?? "")
   }
 
   fileprivate func handleTextViewChange(_ textView: UITextView) {
     guard !isUpdatingFromJS else { return }
+    view.setNeedsLayout()
     recalculateFontSize()
     onChangeText?(textView.text ?? "")
   }
@@ -490,6 +533,15 @@ class HybridAutoSizeInput: HybridAutoSizeInputSpec {
     onBlur?()
   }
 
+  @objc private func handleContainerTap() {
+    guard editable != false else { return }
+    if multiline == true {
+      _ = multiLineInput.becomeFirstResponder()
+    } else {
+      _ = singleLineInput.becomeFirstResponder()
+    }
+  }
+
   // MARK: - Helpers
 
   private func colorFromHex(_ hex: String?) -> UIColor? {
@@ -518,6 +570,25 @@ class HybridAutoSizeInput: HybridAutoSizeInputSpec {
     }
   }
 
+  private func updateInputAppearance() {
+    let borderWidth: CGFloat = (showBorder == true) ? 1 : 0
+    let backgroundColor = colorFromHex(inputBackgroundColor) ?? UIColor.clear
+
+    singleLineInput.layer.borderWidth = borderWidth
+    singleLineInput.layer.borderColor = UIColor.separator.cgColor
+    singleLineInput.backgroundColor = backgroundColor
+
+    multiLineInput.layer.borderWidth = borderWidth
+    multiLineInput.layer.borderColor = UIColor.separator.cgColor
+    multiLineInput.backgroundColor = backgroundColor
+  }
+
+  private func measuredSingleLineTextWidth(_ text: String, font: UIFont?) -> CGFloat {
+    guard !text.isEmpty else { return 0 }
+    let effectiveFont = font ?? makeFont(size: currentFontSize)
+    return (text as NSString).size(withAttributes: [.font: effectiveFont]).width
+  }
+
   private func textAlignmentFrom(_ align: String?) -> NSTextAlignment {
     switch align {
     case "center": return .center