import SwiftUI

public struct ExpandingTextFieldView: View {
    @Binding var text: String
    let placeholder: String
    @FocusState private var isFocused: Bool

    public init(
        text: Binding<String>,
        placeholder: String = "Enter your text here..."
    ) {
        self._text = text
        self.placeholder = placeholder
    }

    public var body: some View {
        TextEditor(text: $text)
            .fixedSize(horizontal: false, vertical: true)
            .focused($isFocused)
            .onAppear {
                text = text.isEmpty ? placeholder : text
            }
            .onChange(of: isFocused) { _, focus in
                text = focus && text == placeholder ? "" : (!focus && text.isEmpty ? placeholder : text)
            }
    }
}

#Preview {
    @State @Previewable var textValue = ""
    ExpandingTextFieldView(
        text: $textValue,
        placeholder: "Type here..."
    )
    .overlay(RoundedRectangle(cornerRadius: 8).stroke(.gray.opacity(0.5), lineWidth: 2))
}

When the textValue is "", the view renders fine, the placeholder is displayed, and I can edit the value.

When the textValue is set to something else though then the view doesn't render at all. I don't even know how to debug or figure out what's wrong with such a thing. Thank you for your help!

import SwiftUI

public struct ExpandingTextFieldView: View {
    @Binding var text: String
    let placeholder: String
    @FocusState private var isFocused: Bool

    public init(
        text: Binding<String>,
        placeholder: String = "Enter your text here..."
    ) {
        self._text = text
        self.placeholder = placeholder
    }

    public var body: some View {
        TextEditor(text: $text)
            .fixedSize(horizontal: false, vertical: true)
            .focused($isFocused)
            .onAppear {
                text = text.isEmpty ? placeholder : text
            }
            .onChange(of: isFocused) { _, focus in
                text = focus && text == placeholder ? "" : (!focus && text.isEmpty ? placeholder : text)
            }
    }
}

#Preview {
    @State @Previewable var textValue = ""
    ExpandingTextFieldView(
        text: $textValue,
        placeholder: "Type here..."
    )
    .overlay(RoundedRectangle(cornerRadius: 8).stroke(.gray.opacity(0.5), lineWidth: 2))
}

When the textValue is "", the view renders fine, the placeholder is displayed, and I can edit the value.

When the textValue is set to something else though then the view doesn't render at all. I don't even know how to debug or figure out what's wrong with such a thing. Thank you for your help!

• swift
• swiftui

• It's the fixedSixe modifier that causes the problem but I don't understand why. – Joakim Danielson Commented Jan 18 at 20:42
• could not replicate your issue, all works well for me on MacOS 15.3 using Xcode 16.2, target iOS-18, tested on real iOS device and MacCatalyst. What system are you using/targeting? – workingdog support Ukraine Commented Jan 19 at 0:00
• @workingdogsupportUkraine I am not op but I got the impression the issue is with the preview – Joakim Danielson Commented Jan 19 at 8:09
• Ha, I didn't even see there was some code for the Preview. I should scroll more often; this is not the first time I've been caught out by this. – workingdog support Ukraine Commented Jan 19 at 8:39

1 Answer 1

I ended up doing this which worked, but I still want to know why the original way doesn't work.

import SwiftUI

public struct ExpandingTextFieldView: View {
    @Binding var text: String
    let placeholder: String

    public init(
        text: Binding<String>,
        placeholder: String = "Enter your text here..."
    ) {
        self._text = text
        self.placeholder = placeholder
    }

    public var body: some View {
        TextField(placeholder, text: $text, axis: .vertical)
    }
}