1

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

rene
  • 1,975
  • 21
  • 33

3 Answers3

1

Had this same problem on macos 12.5.1, without changing anything else, I installed macos 13 beta 6, and the bug was fixed. It appears to be an odd interaction between SecureField and either TextField or TextEditor on macos 12.

Zach Hall
  • 71
  • 3
  • I cannot move to macOS 13 yet, but it is good to know that this issue seems to be fix. Thank you! – rene Sep 07 '22 at 11:04
  • I can confirm that this problem no longer appears with macOS 13.5 and Xcode 14.3.1. – rene Aug 02 '23 at 15:27
1

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

ttcloud
  • 36
  • 1
0

I don't know the reason why this is happening (maybe it should give you suggestions like the SecureField), but apparently this is not the case when you have the same TextField above the real one.

This isn't perfect, since there is minimal Space on the top, but it works and is better than the strange window:

Text Field without strange window

Secure Field

import SwiftUI
struct ContentView: View {
    @State var emailAddress : String = ""
    @State var password : String = ""
    var body: some View {
        VStack {
            TextField("Email:", text: $emailAddress)
                .frame(width: 0, height: 0)

            TextField("Email:", text: $emailAddress)
            
            SecureField("Password:", text: $password, prompt: nil)
        }
        .padding()
    Spacer()
    }
}

I have tested it with Xcode 14 beta 3 and my MacBook Pro M1.

  • Thank you for the suggestion! I tried this and it looked promising, eliminating the strange view when typing in the TextField. But the strange view still appears when I start typing in the SecureField. I've tried inserting a zero-height TextField also before and after the SecureField, but the strange view still appears. – rene Aug 10 '22 at 19:00
  • With macOS 12.5 and Xcode 14 I don't have this issue (with my code), that you described. Maybe it is just a bug Apple didn’t fixed yet. I am wondering if anybody else had this problem, since Login Screens are an important part of macOS apps. –  Aug 12 '22 at 10:44
  • Could you please send an image of the strange window, that appears when you start typing in the secure field? I have also added a screenshot of my secure field. –  Aug 12 '22 at 20:36
  • Thanks again. I hope you are right that this a bug that has been fixed with Xcode 14. – rene Aug 13 '22 at 13:45