Search code examples
macosswiftuisecurefield

SwiftUI View with TextField and SecureField buggy on macOS (shows strange view)

On macOS I need a SwiftUI form that has a TextField (for email) and then a SecureField (for password). Seems simple, but when I start typing in the TextField a strange view appears below the field:

enter image description here

Some observations:

  • This does not happen if the SecureField is replaced by a TextField.
  • This does not happen if the TextField is removed.
  • A similar strange view will also appear when I start to type in the SecureField.
  • The strange views will disappear and reappear as I change focus between the fields.
  • Finally, this does not happen if the SecureField is placed before the TextField (maybe I should start a new trend in UI design;-).

Can somebody suggest a way to avoid or work around this issue? Here is the code (simplified as much as possible):

import SwiftUI
struct ContentView: View {
    @State var emailAddress : String = ""
    @State var password : String = ""
    var body: some View {
        Group {
            TextField("Email:", text: $emailAddress)
            SecureField("Password:", text: $password, prompt: nil)
        }
        .padding()
        Spacer()
    }
}

Xcode 13.4.1; macOS 12.5; MacBook Pro (2020). Also happened with Xcode 13.4 and macOS 12.4.x.

Update 2022.08.13: Per request from Multi Media here is a screenshot with strange view that appears when typing in the SecureField. Here I've added an additional TextField, as suggested (although not with zero height, so that it is visible in the screenshot).

Also I should note that you can make the strange view disappear, e.g. by pressing the ESC key.

when typing in SecureField

Solution

  • I found how to solve the problem,just add focusable() to the secureField,you can try,it works for me!