How to make styled picker fully touchable

Question

I've styled a picker in the following way:

Picker(selection: $selectedProduct, label: Text("Product: \(self.products[self.selectedProduct].name!)")) {
                
                ForEach(0 ..< roles.count) {
                    Text(products[$0].name!)
                        .frame(minWidth: 0, maxWidth: .infinity)
                }
                
            }
            .animation(nil)
            .frame(minWidth: 0, maxWidth: .infinity)
            .font(.headline)
            .foregroundColor(Color.white)
            .padding()
            .background(Color(UIColor(.blue)))
            .cornerRadius(15.0)
            .pickerStyle(MenuPickerStyle())
            

This produces the style I want as below:

Unfortuantly only the area around the label is touchable:

I can't work out how to make the entire thing touchable. Am I missing something?

Any help would be greatly appretiated.

Answer 1

Try to apply all size/frame related modifiers to internal label, instead of picker itself, like

   Picker(selection: $selectedProduct, label: 
      Text("Product: \(self.products[self.selectedProduct].name!)")
         .frame(minWidth: 0, maxWidth: .infinity)
         .font(.headline)
         .foregroundColor(Color.white)
         .padding()
         .background(Color(UIColor(.blue)))
         .cornerRadius(15.0)
   ) {
            
        ForEach(0 ..< roles.count) {
            Text(products[$0].name!)
                .frame(minWidth: 0, maxWidth: .infinity)
        }
        
    }
    .animation(nil)
    .pickerStyle(MenuPickerStyle())