Side by side Picker wheels failing in iOS 15

You used to be able to put two wheel Pickers side-by-side in an HStack, if you used .frame(...) to set the width, along with .clipped().

Example code from previous question here: https://developer.apple.com/forums/thread/127028

HStack(spacing: 0) {
    Picker(selection: $choice1, label: Text("C1")) {
        ForEach(0..<10) { n in
            Text("\(n) a").tag(n)
       }
    }
    .pickerStyle(.wheel)
    .frame(minWidth: 0)
    .clipped()
    // repeat with second Picker
}

This is not working for me now in iOS 15. The views still appear side by side, but the touch area seems to overlap. When you try to adjust the first wheel, it spins the second one. I can move the first wheel, if I touch way over to the leading side of the screen.

(I had to add the explicit Picker style. It seems like defaulting to .menu also started in iOS 15. ?)

Answered by OOPer in 688768022

but the touch area seems to overlap.

Seems to be the same issue as this thread:

Limit width of wheel style picker on iOS

Have you tried using .compositingGroup() as shown in it?

but the touch area seems to overlap. When you try to adjust the first wheel, it spins the second one. 

Unless I missed something, I tested in your configuration (Xcode 13, iOS 15 in simulator), without problem.

Except it is bad looking to have the 2 so close.

What about adding a small space between the 2 ? Like 10 ?

I do not get the problem either (in fact, in your initial post, picker style was there but ill placed).

Here is the code I used:

struct ContentView: View {
    @State private var selectedActivity = 0
    @State private var selectedActivity2 = 2

    var body: some View {
        HStack(spacing: 0) {
            Picker(selection: $selectedActivity, label: Text("C1")) {
                ForEach(0..<10) { n in
                    Text("\(n) a").tag(n)
               }
            }
            .pickerStyle(.wheel)
            .frame(minWidth: 0)
            .clipped()
            // repeat with second Picker
            Picker(selection: $selectedActivity2, label: Text("C1")) {
                ForEach(0..<10) { n in
                    Text("\(n) a").tag(n)
               }
            }
            .pickerStyle(.wheel)
            .frame(minWidth: 0)
            .clipped()
       }
  }
}

So, could you:

  • post your complete exact code
  • post an image of what you get
Accepted Answer

but the touch area seems to overlap.

Seems to be the same issue as this thread:

Limit width of wheel style picker on iOS

Have you tried using .compositingGroup() as shown in it?

Here's a simulator screenshot (iPhone SE). I've marked about where the border is, for the touch events. In my real app, with wider text, it's even further to the right, so that touching the first column of text actually spins the second picker.

Side by side Picker wheels failing in iOS 15
 
 
Q