SwiftUI is there any way of getting a disabled TextField to be grayed out on Mac OS

Question

When a SwitfUI TextField is disabled, on Mac OS, there is no visual feedback that the field is not enterable (apart from not accepting focus click). I have searched high and low, it looks like simply setting .background(Color.whatever) works for IOS (from all the "how tos" that I have encountered). However for a Mac OS app, it only changes the color of the thin boundary of the textfield. I have futzed around and found that I can add opaque overlays to simulate the effect, but that seems overly complex for what I always took to be conventional standard of greying out of disabled fields. Which makes me think that I am missing something bleedingly obvious somewhere.

Has anyone a sample of a MacOS SwiftUI struct that greys the background of a disabled TextField ? My minimal example of what I am doing to see the issue is below.

struct ContentView: View {
  @State var nameEditDisabled = true
  @State var myText = "Fred"
  var body: some View {
    VStack {
      Button("Change Name") {
        nameEditDisabled.toggle()
      }
      TextField("hello", text: $myText)
        .background(nameEditDisabled ? Color.gray: Color.yellow)
        .disabled(nameEditDisabled)
    }
  }
}

Have you considered that, if the *normal* behaviour on MacOS is for there to be no visual feedback, your application will be considered wrong or odd by acting differently? — Damien_The_Unbeliever, Jul 21 '21 at 06:35
I take your point. Looking through the Mac Preferences, the "convention" appears to be that a disabled field has grey text and an enabled field black. — altimes, Jul 21 '21 at 06:54
Nonetheless, for me as a novice, the difference in apparent functionality of the same base code between IOS and MacOS is worthy of note (even given that what I was trying to do would be considered poor practice ;-)) — altimes, Jul 21 '21 at 07:01

workingdog support Ukraine · Accepted Answer · 2021-07-21T07:22:09.930

1

it seems to be "fixed' in swiftUI 3.0, macos 12. I get a slightly darker shade of gray when disabled. When in focus, I get a blue border.

Edit:

struct ContentView: View {
    @State var nameEditDisabled = false
    @State var myText = "Fred"
    var body: some View {
        VStack {
            Button("Change disabling") {
                nameEditDisabled.toggle()
            }
            TextField("hello", text: $myText)
                .colorMultiply(nameEditDisabled ? .gray: .yellow)
                .disabled(nameEditDisabled)
        }.frame(width: 444, height: 444)
    }
}

edited Jul 21 '21 at 07:22

answered Jul 21 '21 at 06:56

workingdog support Ukraine

26,280
4
27
37

As noted by Damien I was trying for a non-convention. To follow convention, I would replace the background line with .foregroundColor(nameEditDisabled ? Color.gray: Color.black) – altimes Jul 21 '21 at 07:07
I've edited the answer with a "non-conventional" way. This gives you a yellow background when enabled, and a "conventional" gray background when disabled. – workingdog support Ukraine Jul 21 '21 at 07:22
Many thanks, it does just what I was trying to achieve. "colorMultiply".... would never have got to that. You learn something new every day :-) – altimes Jul 22 '21 at 01:35
glad it helped. If you could tick the answer as correct, that would be good as well. – workingdog support Ukraine Jul 22 '21 at 02:24

SwiftUI is there any way of getting a disabled TextField to be grayed out on Mac OS

1 Answers1