title: How to select a Picker with MenuPickerStyle outside of the label text
body: <p>I have a simple menu picker that I have placed within a rounded rectangle border and chevron image. I'd like for users to be able to tap anywhere within this rectangle to activate the showing of the picker options but no matter what it only seems to be selectable within the actual text (see image with highlighted blue border). Is there any way to achieve this without scaling the text?</p>
  <p>I've tried adding padding and scaling modifiers with no such luck.</p>
  <pre><code>var body: some View {
      ZStack {
          HStack {
              Rectangle()
                  .foregroundColor(Color.black)
                  .frame(height: 40)
              Image(uiImage: Icon.chevronDown.image())
                  .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 8))
          }
          .overlay(
              RoundedRectangle(cornerRadius: 5)
                  .stroke(Color.black, lineWidth: 1)
          )
          .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
          Picker(selectedOption, selection: $selectedOption) {
              ForEach(options, id: \.self) { option in
                  Text(option)
              }
          }
          .pickerStyle(MenuPickerStyle())
      }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/wffsF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wffsF.png" alt="picker menu" /></a></p>
  <p>How can I make the white area between the rounded black border and the blue text selectable to active the menu picker options the same way as tapping on the actual blue text?</p>