Improve filer dialog auto-complete usability

[mtrezza]

New Feature / Enhancement Checklist

• I am not disclosing a vulnerability.
• I am not just asking a question.
• I have searched through existing issues.

Current Limitation

#2463 introduced auto-complete in the filter dialog. However, it's usability should be improved. When opening the filter dialog, a key is pre-selected and needs to be manually deleted for the whole key list to become visible. This can be more time consuming than before the auto-complete feature was added.

Feature / Enhancement Description

Behavior when opening empty filter dialog (without any filter set), and when clicking on the "Add" button to add a new filter condition:

• Auto-focus on key text field
• Do not pre-select any field, i.e. the key text field should be empty and the whole key list should be visible

[parse-github-assistant]

Thanks for opening this issue!

• 🎉 We are excited about your ideas for improvement!

[mtrezza]

cc @patelmilanun

[patelmilanun]

I intentionally added the default key for autocomplete. If we do not do it than we need to put some validation. The component itself doesn't have the validation so it need to be added externally.

Do you still want to go ahead with this? I mean if u click on the field the whole text will get selected anyway. It's just 1 keystroke more than the older version.

[mtrezza]

I'd expect by default seeing an empty text field with the whole list showing.

The pre-selection of the key is really arbitrary and chances are that in most cases its not the text field someone is looking for. Could you disable the 'apply' and 'save' buttons unless every field has a valid key selected? If that's too difficult, I would just clear the text field as soon as someone clicks into it.

I think the issue is that the dashboard is currently not very keyboard friendly. There's a lot of mouse action and that is always slower than keyword shortcuts. I would imagine at some point we get to the following scenario:

1. Hit key F -> filter dialog opens; text field has focus automatically.
2. Enter em -> fields email and email2 shows in list.
3. Hit arrow down key -> field email is selected.
4. Hit Enter key -> search filter is applied (like clicking the "Apply" button)

In order to get to that, it would be good if when you open the filter dialog, the text field gets focused and is empty, with the whole field list showing.

[mtrezza]

@Bhavyajain21 this may be interesting for you