Create data thing when input no longer focused

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.

Whatnextapp (4)

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. :thinking:

It seems I managed to figure out a solution:

  1. Add a “template” (yes/no) value to the Checklist Item data-thing.
  2. Create a default blank Checklist Item data-thing for every new task, with value template = yes.
  3. Change appearance of repeating group’s input field when Checklist Item’s template value = yes.
  4. 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.

Whatnextapp (6)

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.

:thinking:

Any suggestions?

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. :face_with_monocle:

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. :neutral_face:

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.

1 Like

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! :slight_smile:

This topic was automatically closed after 70 days. New replies are no longer allowed.