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

user_3853879 0
Viewed 551

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.

App

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?

swiftui swift ios
3 Answers

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

demo

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 !!
user_122990300

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()
        }

    }
}
user_38538790

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)
}
user_113368400
Related