FB13727682: SwiftUI scrollable TextFields not rendering correctly in certain autocomplete cases

[AnthonyWharton]

• Date: 2024-04-14
• Resolution: Open
• Area: SwiftUI
• OS: iOS
• Type: Incorrect/Unexpected Behaviour

Description

When using a multi-line scrollable TextField, there are some cases where clearing the text state variable will not cause the TextField to re-draw itself. In particular, in cases where the autocompletion has provided a suggestion in “greyed out” text.

For example when I type “Fair enough”, the when I get to “Fair en” the system will autofill in light grey text “ough”. This changes the underlying text variable bound to the TextField to the fully completed text.

In cases where the user continues to manually type the text to completion (i.e. does not press on the word suggestion bar, or does not move to another focus which implicitly keeps the suggestion), and then presses a button that clears the TextField, the text state variable will reset, however the TextField will not redraw to be empty again. We would expect the TextField to return to an empty state, with only the greyed out prompt showing.

Please find attached:

• A minimum reproducible example case.
• A short 16 second video showing the unexpected behaviour in the provided example code (when typing to completion), followed by an example of expected behaviour (when pressing the autocomplete suggestion in the keyboard).

Tested on iOS 17.4.1, and Xcode 15.2.

Files

TextFieldBug.zip
TextFieldBug.mov

[AnthonyWharton]

If anyone comes across this issue in the meantime, I have found the following workaround using SwiftUIIntrospect

import SwiftUIIntrospect

// ...

TextField("...", text: $text, axis: .vertical)
    // modifiers...
    .introspect(.textField(axis: .vertical), on: .iOS(.v17)) {
        // $0 is a UITextView used behind the scenes by SwiftUI
        $0.inlinePredictionType = .no
    }

Further reading:

• https://developer.apple.com/documentation/uikit/uitextinputtraits/4240862-inlinepredictiontype
• https://swiftpackageindex.com/siteline/swiftui-introspect/main/documentation/swiftuiintrospect/TextFieldWithVerticalAxisType