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.
Any help here?
Thinking out loud:
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.
It seems I managed to figure out a solution:
- 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.
Doesn’t “set focus to input” work?
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.
Yep, you’re right. That was my original plan and I got diverted through experimentation and wrong assumptions about the element value changed trigger.
I’ve added the input below the repeating group and it work as expected. Thanks!
This topic was automatically closed after 70 days. New replies are no longer allowed.