Add DataListEntry using HTML datalist tag

[rajgoel]

Is your feature request related to a problem? Please describe.

It would be great to have a DataListEntry that combines the usability of the TextFieldEntry with the SelectEntry using the HTML datalist tag.

Describe the solution you'd like

I manipulated the HTML in the browser to showcase what I propose to

<div class="bio-properties-panel-select">
  <label for="bio-properties-panel-Process_1-operator-0-type" class="bio-properties-panel-label">
     Type
  </label>
  <input name="Process_1-operator-0-type" spellcheck="false" autocomplete="off" class="bio-properties-panel-input" list="bio-properties-panel-Process_1-operator-0-type-list" id="bio-properties-panel-Process_1-operator-0-type">
  <datalist class="bio-properties-panel-input" id="bio-properties-panel-Process_1-operator-0-type-list">
    <option value="expression">expression</option>
    <option value="lookup">lookup</option>
    <option value="random">random</option>
    <option value="choice">choice</option>
  </datalist>
</div>

Describe alternatives you've considered

The current alternatives are to use both TextFieldEntry and SelectEntry and combine the input by code.

Additional context

The datalist input field with above html is shown below:

Ideally, the solution has a validation option like the TextFieldEntry.

Related to / duplicate of bpmn-io/bpmn-js-properties-panel#679.

[Skaiir]

Hello @rajgoel , and thanks for raising this issue.

This feels like a nice-to-have feature, especially for the scenarios where there are quite a lot of possible entries that we'd want to search through, or like you've said simply for the flexibility. Especially in light of the recent Firefox support of datalists I would definitely not mind seeing it in the codebase 😄

However, as this is mainly a QoL improvement, it falls on the low end of our priorities and as our backlog is quite large, I would suggest having a go at providing a PR if you really want this feature in. Otherwise we'll keep the issue in the backlog until we either get to it or decide to re-prioritize it.

[rajgoel]

I had a brief look at the code already, but struggled in the implementation, or more precisely, in setting up the repository so that I can test my code adaptations. Might try it again when I find time.

[Skaiir]

@rajgoel If you need some assistance with that, I can help get you through the initial setup. Just let me know where you're having trouble specifically and I'll see if I can help.