How to Fix the Double “Done” Buttons in Apple’s “Working with UI Controls” Tutorial

Screenshot of Simulator showing the "Double Done Button" problem floating atop the page for Apple's "Working With UI Controls" Tutorial
Seeing double?

Apple’s tutorial for SwiftUI: “Working with UI Controls” has a small error that’s very frustrating, but also quite easy to fix. If you are like me, however, you will doubt your instincts, overthink it, and get frustrated before finding that solution. To save you time and self-doubt, I thought I’d share my solution.

As the tutorial stands today, it instructs you to create a custom “Done” button in the top left corner that saves changes to your profile. It then has you implement a standard “Edit” button using SwiftUI’s EditButton() class. I have not used previous iterations of this button, but my guess is in previous versions of this tutorial the default action for the edit button was different. Currently, EditButton() becomes a “Done” button while in edit mode, leaving you with a “Done” button in each corner with no clear sign which button will do what the user wants. Not only is this the result from completing the tutorial, Apple’s completed solution file also features this double “Done” problem. Simply dismissing the modal sheet leaves edit mode active when you return to the profile sheet.

According to Apple’s documentation (found here) struct EditButton is simply a toggle bringing the user in and out of edit mode. Since that is also what we designed our custom “Done” button to do, we can simply move this functionality to our “if statement” dictating what happens when edit mode is deactivated, then change our custom button to cancel any changes instead.

After changing our custom button’s functionality, update the button’s text to “Cancel”. I also changed the button’s color to red to better match apple’s guidelines for destructive actions. It also adds some extra visual clarity.

There you have it! When I get a minute, I might try my hand at fixing other issues to make the app more functional, like connecting the cards on the featured tab to the actual places or allowing users to dismiss edit mode by swiping away. If this interests you, please let me know in the comments below. Also, if you have your own method for fixing this, or adapted the tutorial code to do something cool. Feel free to link to your solution in the comments. I’d love to see what you come up with!

Screenshot of Simulator showing the fix for the "Double Done Button" problem floating atop the page for Apple's "Working With UI Controls" Tutorial.