Why the ToolbarItem Button is not tappable?

Question

I have a navigationView with the ToolbarItem containing a button. This button is not tappable correctly. To move to the next screen i have to tap underneath. As you can see from the Debug View Hierarchy:

Here is how i am adding the button to the toolbar:

var body: some View {
    ZStack { ... }
    .navigationBarTitle(Text("Format"), displayMode: .inline)
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            Button("Next") {
                setCanvas()
            }
        }      
    }
}

This view is being pushed with a NavigationLink

Does this answer your question https://stackoverflow.com/a/60492031/12299030? — Asperi, Oct 18 '21 at 11:20
Looks like your solution is not different from Asperi's mentioned answer, in this case you should delete both this answer and the question, because it's really a duplicate — Phil Dukhov, Oct 18 '21 at 14:34
In my opinion someone could find this post with this different title and description... I'm not a moderator here, so I could delete with no problem — DanielZanchi, Oct 19 '21 at 15:05

score 0 · Accepted Answer · answered Oct 18 '21 at 12:33

The solution is to add an .id to the Button in order to force the Button to render it self. I was showing a modal before this and it had that position.

var body: some View {
ZStack { ... }
.navigationBarTitle(Text("Format"), displayMode: .inline)
.toolbar {
    ToolbarItem(placement: .navigationBarTrailing) {
        Button("Next") {
            setCanvas()
        }
        .id(UUID())
    }      
}

}

Why the ToolbarItem Button is not tappable?

1 Answers1