bitwarden · phil-livefront · Oct 22, 2024 · Aug 6, 2024 · Aug 12, 2024 · Aug 13, 2024
@@ -104,8 +104,7 @@ public enum UI {
         UISearchBar.appearance().setImage(tintedImage, for: .clear, state: .normal)
         UISearchBar.appearance().setImage(Asset.Images.search16.image, for: .search, state: .normal)
 
-        // Adjust the appearance of `UITextView` for `BitwardenMultilineTextField` instances on
-        // iOS 15.
+        // Adjust the appearance of `UITextView` for `BitwardenUITextField` instances on iOS 15.
         UITextView.appearance().isScrollEnabled = false
         UITextView.appearance().backgroundColor = .clear
         UITextView.appearance().textContainerInset = .zero

@@ -15,6 +15,10 @@ struct BitwardenTextValueField<AccessoryContent>: View where AccessoryContent: V
    /// The (optional) accessibility identifier to apply to the title of the field (if it exists)
     var titleAccessibilityIdentifier: String?
 
+    /// A flag to determine whether to use a `UITextView` implementation instead of the default SwiftUI-based text view.
+    /// When `true`, a `UITextView` will be used for improved text selection and cursor/keyboard management.
+    var useUIKitTextView: Bool
+
     /// The text value to display in this field.
     var value: String
 
@@ -25,19 +29,37 @@ struct BitwardenTextValueField<AccessoryContent>: View where AccessoryContent: V
     /// content automatically has the `AccessoryButtonStyle` applied to it.
     var accessoryContent: AccessoryContent?
 
+    /// A state variable that holds the dynamic height of the text view.
+    /// This value is updated based on the content size of the text view,
+    /// allowing for automatic resizing to fit the text content.
+    /// The initial height is set to a default value of 28 points.
+    @SwiftUI.State private var textViewDynamicHeight: CGFloat = 28
+
     // MARK: View
 
     var body: some View {
-        BitwardenField(title: title, titleAccessibilityIdentifier: titleAccessibilityIdentifier) {
-            Text(value)
-                .styleGuide(.body)
-                .multilineTextAlignment(.leading)
-                .foregroundColor(Asset.Colors.textPrimary.swiftUIColor)
-                .accessibilityIdentifier(valueAccessibilityIdentifier ?? value)
-                .if(textSelectionEnabled) { textView in
-                    textView
-                        .textSelection(.enabled)
-                }
+        BitwardenField(
+            title: title,
+            titleAccessibilityIdentifier: titleAccessibilityIdentifier
+        ) {
+            if useUIKitTextView {
+                BitwardenUITextView(
+                    text: .constant(value),
+                    calculatedHeight: $textViewDynamicHeight,
+                    isEditable: false
+                )
+                .frame(minHeight: textViewDynamicHeight)
+            } else {
+                Text(value)
+                    .styleGuide(.body)
+                    .multilineTextAlignment(.leading)
+                    .foregroundColor(Asset.Colors.textPrimary.swiftUIColor)
+                    .accessibilityIdentifier(valueAccessibilityIdentifier ?? value)
+                    .if(textSelectionEnabled) { textView in
+                        textView
+                            .textSelection(.enabled)
+                    }
+            }
         } accessoryContent: {
             accessoryContent
         }
@@ -54,7 +76,8 @@ struct BitwardenTextValueField<AccessoryContent>: View where AccessoryContent: V
     ///   - valueAccessibilityIdentifier: The (optional) accessibility identifier to apply
     ///     to the displayed value of the field
     ///   - textSelectionEnabled: Whether text selection is enabled.
-    ///   This doesn't allow range selection, only copy/share actions.
+    ///     This doesn't allow range selection, only copy/share actions.
+    ///   - useUIKitTextView: Whether we should use a UITextView or a SwiftUI version.
     ///   - accessoryContent: Any accessory content that should be displayed on the trailing edge of
     ///     the field. This content automatically has the `AccessoryButtonStyle` applied to it.
     init(
@@ -63,12 +86,14 @@ struct BitwardenTextValueField<AccessoryContent>: View where AccessoryContent: V
         value: String,
         valueAccessibilityIdentifier: String? = "ItemValue",
         textSelectionEnabled: Bool = true,
+        useUIKitTextView: Bool = false,
         @ViewBuilder accessoryContent: () -> AccessoryContent
     ) {
         self.textSelectionEnabled = textSelectionEnabled
         self.title = title
         self.titleAccessibilityIdentifier = titleAccessibilityIdentifier
         self.value = value
+        self.useUIKitTextView = useUIKitTextView
         self.valueAccessibilityIdentifier = valueAccessibilityIdentifier
         self.accessoryContent = accessoryContent()
     }
@@ -85,21 +110,24 @@ extension BitwardenTextValueField where AccessoryContent == EmptyView {
     ///   - valueAccessibilityIdentifier: The (optional) accessibility identifier to apply
     ///     to the displayed value of the field
     ///   - textSelectionEnabled: Whether text selection is enabled.
-    ///   This doesn't allow range selection, only copy/share actions.
+    ///     This doesn't allow range selection, only copy/share actions.
+    ///   - useUIKitTextView: Whether we should use a UITextView or a SwiftUI version.
     ///
     init(
         title: String? = nil,
         titleAccessibilityIdentifier: String? = "ItemName",
         value: String,
         valueAccessibilityIdentifier: String? = "ItemValue",
-        textSelectionEnabled: Bool = true
+        textSelectionEnabled: Bool = true,
+        useUIKitTextView: Bool = false
     ) {
         self.init(
             title: title,
             titleAccessibilityIdentifier: titleAccessibilityIdentifier,
             value: value,
             valueAccessibilityIdentifier: valueAccessibilityIdentifier,
-            textSelectionEnabled: textSelectionEnabled
+            textSelectionEnabled: textSelectionEnabled,
+            useUIKitTextView: useUIKitTextView
         ) {
             EmptyView()
         }
@@ -119,4 +147,16 @@ extension BitwardenTextValueField where AccessoryContent == EmptyView {
     }
     .background(Color(.systemGroupedBackground))
 }
+
+#Preview("Legacy view") {
+    VStack {
+        BitwardenTextValueField(
+            title: "Title",
+            value: "Text field text",
+            useUIKitTextView: true
+        )
+        .padding()
+    }
+    .background(Color(.systemGroupedBackground))
+}
 #endif
@@ -0,0 +1,134 @@
+import SwiftUI
+import UIKit
+
+// MARK: - BitwardenUITextView
+
+/// A custom `UITextView` wrapped in a `UIViewRepresentable` for use in SwiftUI.
+///
+struct BitwardenUITextView: UIViewRepresentable {
+    // MARK: - Coordinator
+
+    /// A coordinator to act as the delegate for `UITextView`, handling text changes and other events.
+    ///
+    class Coordinator: NSObject, UITextViewDelegate {
+        /// The parent view.
+        var parent: BitwardenUITextView
+
+        /// The calculated height of the text view.
+        var calculatedHeight: Binding<CGFloat>
+
+        /// Initializes a new `Coordinator` for the `BitwardenUITextView`.
+        ///
+        /// - Parameters:
+        ///    -  parent: The parent view that owns this coordinator.
+        ///    - calculatedHeight: The height of the text view.
+        ///
+        init(
+            _ parent: BitwardenUITextView,
+            calculatedHeight: Binding<CGFloat>
+        ) {
+            self.parent = parent
+            self.calculatedHeight = calculatedHeight
+        }
+
+        func textViewDidChange(_ uiView: UITextView) {
+            parent.text = uiView.text
+            parent.recalculateHeight(
+                view: uiView,
+                result: calculatedHeight
+            )
+        }
+    }
+
+    // MARK: Properties
+
+    /// The text entered into the text field.
+    @Binding var text: String
+
+    /// The calculated height of the `UITextView`. This value is dynamically updated based on the
+    /// content size, and it helps to adjust the height of the view in SwiftUI.
+    @Binding var calculatedHeight: CGFloat
+
+    /// Indicates whether the `UITextView` is editable. When set to `true`, the user can edit the
+    /// text. If `false`, the text view is read-only.
+    var isEditable: Bool = true
+
+    /// Creates and returns the coordinator for the `UITextView`.
+    ///
+    /// - Returns: A `Coordinator` instance to manage the `UITextView`'s events.
+    ///
+    func makeCoordinator() -> Coordinator {
+        Coordinator(self, calculatedHeight: $calculatedHeight)
+    }
+
+    // MARK: - UIViewRepresentable Methods
+
+    /// Creates and configures the `UITextView` for this view.
+    ///
+    /// - Parameter context: The context containing the coordinator for this view.
+    /// - Returns: A configured `UITextView` instance.
+    ///
+    func makeUIView(context: Context) -> UITextView {
+        let textView = UITextView()
+        textView.adjustsFontForContentSizeCategory = true
+        textView.autocapitalizationType = .sentences
+        textView.delegate = context.coordinator
+        textView.textColor = Asset.Colors.textPrimary.color
+        textView.isScrollEnabled = false
+        textView.isEditable = isEditable
+        textView.isUserInteractionEnabled = true
+        textView.isSelectable = true
+        textView.backgroundColor = .clear
+        textView.tintColor = Asset.Colors.tintPrimary.color
+        textView.textContainerInset = UIEdgeInsets(top: 4, left: 0, bottom: 4, right: 0)
+        textView.textContainer.lineFragmentPadding = 0
+        textView.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+        let customFont = FontFamily.DMSans.regular.font(size: 15)
+        textView.font = UIFontMetrics(forTextStyle: .body).scaledFont(for: customFont)
+        return textView
+    }
+
+    /// Updates the `UITextView` with the latest text when the SwiftUI state changes.
+    ///
+    /// - Parameters:
+    ///   - uiView: The `UITextView` instance being updated.
+    ///   - context: The context containing the coordinator for this view.
+    ///
+    func updateUIView(
+        _ uiView: UITextView,
+        context: Context
+    ) {
+        if uiView.text != text {
+            uiView.text = text
+        }
+
+        recalculateHeight(
+            view: uiView,
+            result: $calculatedHeight
+        )
+    }
+
+    /// Recalculates the height of the UIView based on its content size and updates the binding if the height changes.
+    ///
+    /// - Parameters:
+    ///   - view: The UIView whose height is to be recalculated.
+    ///   - result: A binding to a CGFloat that stores the height value.
+    ///
+    private func recalculateHeight(
+        view: UIView,
+        result: Binding<CGFloat>
+    ) {
+        let newSize = view.sizeThatFits(
+            CGSize(
+                width: view.frame.size.width,
+                height: CGFloat.greatestFiniteMagnitude
+            )
+        )
+
+        if result.wrappedValue != newSize.height {
+            DispatchQueue.main.async {
+                result.wrappedValue = newSize.height
+            }
+        }
+    }
+}