SwiftUI - Does adding a shadow mess up interactivity on TextFields?

Question

I am creating a simple SwiftUI view for a Catalyst Mac app like so:

var body: some View {
    ZStack {
        Color(envColor.getColor())
        HStack {
            Spacer()
            VStack {
                HStack {
                    TextField("First", text: $envColor.stringR)
                    TextField("Second", text: $envColor.stringG)
                }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 200)
            .background(Color.gray)

            Spacer()
            VStack {
                Text("Right Side")
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 200)

            Spacer()
        }

    }
}

When I run the App it just looks like this: A simple view with 2 text boxes. Both of them you can freely type into without issue.

You can highlight and edit either 255 without issue.

However, when I add a shadow to my VStack like so:

var body: some View {
    ZStack {
        Color(envColor.getColor())
        HStack {
            Spacer()
            VStack {
                HStack {
                    TextField("First", text: $envColor.stringR)
                    TextField("Second", text: $envColor.stringG)
                }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 200)
            .background(Color.gray)
            .shadow(radius: 5)

            Spacer()
            VStack {
                Text("Right Side")
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 200)

            Spacer()
        }

    }
}

The app looks exactly the same but I can't type in the TextFields at all. They don't highlight and I can't type in them. I looked at the Debug View Hierarchy and it looks fine with the TextFields in the front.

Here's a video of me using it with the shadow. As you can see the cursor doesn't change to let me edit.

Does adding a shadow to a VStack actually cause issue? And I doing something incorrect? Or is this a bug?

I tried your code and it's working fine on my end. I am able to type and edit anything in textField, with and without shadow — Muhammad Waqas Bhati, Mar 31 '20 at 15:51
@MuhammadWaqasBhati I just added a video of what I'm seeing. I can't edit them when I add the shadow. — brettfazio, Mar 31 '20 at 16:08
It is because UIKit is under the hood of SwiftUI. VStack just never call `drawRect` method so shadow will not work on it. Background with shadow works cause it makes additional `CALayer`. https://stackoverflow.com/questions/34868344/how-to-change-the-background-color-of-uistackview/39720288 — imike, Mar 31 '20 at 18:02

score 3 · Accepted Answer · edited Aug 23 '22 at 15:07

3

Probably this is a defect - you can submit feedback to Apple. Meanwhile I can propose solution - put shadow into background:

Tested with Xcode 11.4 / macOS 10.15.4

VStack {
    HStack {
        TextField("First", text: $first)
        TextField("Second", text: $second)
    }
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 200)
.background(Color.gray.shadow(radius: 5))    // << here !!

edited Aug 23 '22 at 15:07

Martijn Pieters

1,048,767
296
4,058
3,343

answered Mar 31 '20 at 16:11

Asperi

228,894
20
464
690

This worked for me. I found another solution to the problem that I put in another answer & I filed a bug with Apple. – brettfazio Mar 31 '20 at 17:03

Luchi Parejo Alcazar · Answer 2 · 2022-06-13T11:53:41.800

1

Just add clipped() and it will work:

var body: some View {
    HStack {
        TextField(
            placeholder,
            text: $text,
            onEditingChanged: {
                isEditing = $0
            }
        )
           ....
  }
    .background(Colors.shared.background.primary)
    .clipped()
    .shadow(color: .black.opacity(0.3), radius: 0, x: 0, y: 0.33)
    .padding(.bottom, 1)
}

edited Jun 13 '22 at 11:53

answered Jun 13 '22 at 10:46

Luchi Parejo Alcazar

121
6

score 0 · Answer 3 · answered Mar 31 '20 at 17:04

The following change to my code solved the problem in addition to @Asperi's solution. I added .clipped() and now the TextFields work.

var body: some View {
    ZStack {
        Color(envColor.getColor())
        HStack {
            Spacer()
            VStack {
                HStack {
                    TextField("First", text: $envColor.stringR)
                    TextField("Second", text: $envColor.stringG)
                }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 200)
            .clipped()
            .background(Color.gray)

            Spacer()
            VStack {
                Text("Right Side")
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 200)

            Spacer()
        }

    }
}

SwiftUI - Does adding a shadow mess up interactivity on TextFields?

3 Answers3