Preventing edits in TextFields unless cell is selected

For the ToDo section in MarsManaged, the goal is for the user to see and quickly manage their upcoming tasks. 

Screen Shot 2021 10 30 at 6 09 57 PM

The user should be able to easily tweak bookmarked tasks, set target dates, complete or delete them.

Now, given that each cell is composed of multiple editable TextFields, it’s important to prevent unintended editing on cells that are not currently selected.

Otherwise the user inadvertently could:

– Edit text in a cell that’s not selected.

– When attempting to select a cell, if the click lands on text, they would directly start editing it -even though the cell would not be selected-.

– Right click on the TextField would result in all text being selected and wrong context menu options being shown. 

Screen Shot 2021 10 30 at 6 16 43 PM

For instance, in the image above the second cell is selected but the user can click in TextField 1 from the first cell and start editing -while the second cell is still selected-.

So, how can we ensure only the selected cell is editable? Well, there’s two options:

a) You can add a modifier to make cells disabled when they are not selected:

TextField(Placeholder…”, text: $task.content.boundAndClean, onCommit: {

         .disabled(selectedTaskId! != task.id)

}

 

b) You can add a different modifier to only register clicks when the cell is selected.  

TextField(Placeholder…”, text: $task.content.boundAndClean, onCommit: {

          .allowsHitTesting(selectedTaskId! == task.id)

 

}

Important to note is that if you disable the TextField, the text will appear in a different color. However, allowsHitTesting does not affect color at all. 

This closes yet another item on my list for MarsManaged. It’ll when ship when its ready, but I expect to start early testing in the next couple months. If interested & are running macOS Monterey drop me a line at contact@mmvsolucions.com

Until next time, 

 

Marc