SwiftUI: Frame of Menu changes when keyboard appears-CodePudding

I have a simple SwiftUI View that has a Menu and TexField embedded in a Stack.

What happens is that the frame of the Menu changes when the keyboard appears, as seen in the GIF below. The Menu has a red background, the TextField blue.

When the menu is selected, the frame returns to its previous (and correct) size.

struct ContentView: View {
    @State var question = ""        
    var body: some View {
        Spacer()
        HStack {
            Menu("Options") {
                Button("Order Now") {}
                Button("Adjust Order") {}
                Button("Cancel") {}
            }
            .background(.red)
            
            TextField("placeholder", text: $question, axis: .vertical)
                .background(.blue)
        }
        .padding()
    }
}

I would expect the Menu to keep its frame size, just like TextField keeps its pre-keyboard appearance size.

How do I keep the frame of the Menu the correct size?

CodePudding user response：

Try below code, you need to add VStack as the parent stack view:

    VStack{            //<-----------here as parent
           Spacer()
           HStack {
               Menu("Options") {
                   Button("Order Now") {}
                   Button("Adjust Order") {}
                   Button("Cancel") {}
               }
               .background(.red)
               
               TextField("placeholder", text: $question)
                   .background(.blue)
           }
    }         //<----------here
           .padding()

CodePudding user response：

In addition to Jatin's answer, you can define the frame of the label.

I've also added .ignoresSafeArea(.keyboard) as the label was moving up when clicked with the keyboard open

struct ContentView: View {
    @State var question = ""
    var body: some View {
        VStack {
            Spacer()
                HStack {
                    Menu {
                        Button("Order Now") {}
                        Button("Adjust Order") {}
                        Button("Cancel") {}
                    } label: {
                        Text("Options").ignoresSafeArea(.keyboard)
                    }
                    .frame(maxHeight:20, alignment: .center)
                    .background(.red)
                    
                    TextField("placeholder", text: $question)
                        .background(.blue)
                    
                }
            }
            .padding()
    }
}