Field suggestions in form playground input lead to validation error

[barmac]

Describe the bug

In the form playground input, I can provide a JSON for the variables. The editor suggests the form fields keys, but as soon as they are added, the JSON is invalid. This leads to bad UX.

Steps to reproduce

1. Add a form field
2. Start typing in JSON input.
3. now this happens

Expected behavior

No suggestions beyond valid JSON values (e.g. null, true, false).

Environment

• OS: [e.g. MacOS 10.2, Windows 10]
• Camunda Modeler Version: 5.29.0, 5.30.0, maybe even earlier.
• Execution Platform: [e.g. Camunda 7, Camunda 8]
• Installed plug-ins: [...]

Additional context

No response

[nikku]

CC @camunda/human-task-orchestration-dev, please double-check if you can reproduce this issue.

[vsgoulart]

I'll check this next week

[vsgoulart]

@nikku @barmac I worked a bit on the autocomplete, I would like some feedback on it before merging the PR.
Besides what was mentioned on this issue I fixed the variable autocompletion inside object and added quotes on the property name.

For the values besides the ones @barmac mentioned I added empty objects and arrays too.

Here's the preview env: https://demo-fix-form-input-autocomple--camunda-form-playground.netlify.app/

[nikku]

I found one bug that removes the focus from the key field, is this caused by the completion work?

[vsgoulart]

@nikku This is also happening in main, I'll create an issue for it

[nikku]

Checked the suggested auto completion in more details. The new suggestions are simple enough, and fix the issue. Overall, massive kudos, I think the playground goes quite some length to support users (using smart auto-completion) 🎉

---

Some input on the current completion functionality (beyond this bug fix):

• Key completion could move beyond ", insert :, it already does that outside of "":

• We could complete actual values based off the data model that we inferred, consider for example dynamic mailtoOptions, we know exactly how such input would need to look like

[vsgoulart]

I added the comma suggestion for cases where the object is empty, for the case when we're suggesting inside a half-filled property name it's a bit more tricky so I left it for a future improvement.
The second suggestion is also a bit more tricky too since we would have to make the form input schema-aware which it currently isn't

I created issues for the bug reported previously and the autocomplete improvements:

• key field loses focus on change after first load in properties panel bpmn-io/form-js#1357
• Improve form input autocompletion on form playground bpmn-io/form-js#1358

The PR for this issue's bug is here