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

brettfazio :

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?

Asperi :

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

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=376022&siteId=1