I’m building a checklist with a repeating group with auto-binding (to view and edit existing checklist items).
Below that I have a an input field for new checklist items, which does not have any button for saving. The desired behavior is:
If input not focused and input value is not empty, then create new checklist item, then reset input.
This should add a new item to the list and push the input field down one level.
I can’t figure out this puzzle. I cannot seem to be able to create a state or event. The closest I got is whenever the input value changes, but that would create a workflow each time a letter is typed, and there’s no way to tell when the user is done inputting.
I wonder if I should not create a default template blank checklist item for each task which would be displayed differently and linked with auto-binding, then create a new item and clear the template to make it blank again.
Add a “template” (yes/no) value to the Checklist Item data-thing.
Create a default blank Checklist Item data-thing for every new task, with value template = yes.
Change appearance of repeating group’s input field when Checklist Item’s template value = yes.
Create a workflow that triggers whenever the value of a Checklist Input field is changed and the corresponding data item’s template value is “yes”, then change that value to no and create a new blank Checklist Item as template.
The only thing I haven’t figure out yet, is how to automatically make the last item (empty template) the focus, so there’s no need to click on the “add checklist item” again and again.
I don’t understand why just not having the user hit enter when he finishes writing? Just have a transparent icon inside the input group / or use a shortcut plugin - but I think you already know that.
Although your solution is impressive (!) I don’t know if deleting the input is the right UX for delating the item on the list.
Well I was wondering about that too. In my OP, I initially assumed that the trigger “An input’s value is changed” was triggered at every letter typed. Then after testing that assumption I found out it was wrong.
So I noticed how hitting “Enter” already validated the input (and the input losing focus). So I concluded there was no need of any extra element or plugin to achieve what I wanted and I am now using the “Enter” function.
Agreed. This is my “good for now” solution to avoid empty items. I am not sure how to prevent deleting the item with backspace elegantly. I tried to use the “input cannot be empty” attribute, but that leaves me with a reddened input field that is empty, which is worse than deleting it. Ideally, I want to restore the deleted data if emptied, and use a “delete” icon to actually delete the item.
Seems not. Since the input is in a repeating group, I am unable to point at which input field exactly should be focused. I tried to set focus if input value is empty or item template value was “yes” but to no avail.
Hmm I would place the “add checklist item” outside the RG as separate group with input. The UX/UI would be the same and then set focus to input should work.
