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

Question

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:

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.

ttcloud · Accepted Answer · 2022-09-27 06:34:29Z

2

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

answered Sep 27, 2022 at 6:34

ttcloud

462 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zach Hall · Accepted Answer · 2022-09-06 01:26:00Z

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.

answered Sep 6, 2022 at 1:26

Zach Hall

713 bronze badges

2 Comments

rene Over a year ago

I cannot move to macOS 13 yet, but it is good to know that this issue seems to be fix. Thank you!

rene Over a year ago

I can confirm that this problem no longer appears with macOS 13.5 and Xcode 14.3.1.

score 0 · Accepted Answer · 2022-08-12 20:38:01Z

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:

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.

edited Aug 12, 2022 at 20:38

answered Aug 9, 2022 at 12:44

user18908963

4 Comments

rene Over a year ago

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.

user18908963 Over a year ago

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.

user18908963 Over a year ago

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.

rene Over a year ago

Thanks again. I hope you are right that this a bug that has been fixed with Xcode 14.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related