SwiftUI Menu top-to-bottom order varies depending on context?

user_1675875 0
Viewed 618

I think I know the answer to this, but I'll pose it as a question and give my answer, since it was a bit puzzling to me and it took me a little while to figure out.

I'm just starting to use Menu's in SwiftUI. In my first application of them I used them in the nav bar of my app.

            Menu {
                ForEach(pickers, id: \.mediaPickerUIDisplayName) { picker in
                    Button(action: {
                        viewModel.sheetToShow = .picker(picker)
                    }) {
                        Text(picker.mediaPickerUIDisplayName)
                    }.enabled(picker.mediaPickerEnabled)
                }
            } label: {
                SFSymbolIcon(symbol: .plusCircle)
            }

And it looked good.

enter image description here

Then, I changed the context in which this same code was used. Instead of being used from the nav bar, I used it in the center of a screen. And instead I saw:

enter image description here

I was disconcerted in that the top-to-bottom ordering of items in the list had changed.

ios14 swiftui swift
2 Answers

[UPDATE] In iOS16 (beta) at the time of writing you can now use the new modifier .menuOrder(.fixed). That will keep the order of your items, well, fixed and the name implies…

Yup. This is the ‘native’ behavior which I personally find extremely bad. Imagine you have the delete button on the bottom and suddenly without any warning the order changes only because the element has moved above /bellow the midline. Muscle memory will kick in and the users will get extremely confused. This is an omission with catastrophic consequences.

user_112205060

Then I noticed that the order relative to the activating button is the same. So, it seems the order of menu items is context dependent.

enter image description here

user_16758750
Related