Add auto-complete typing to column dropdowns

[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

Currently, selecting a column from a list (dropdown) can only be done by scrolling through the list.

Feature / Enhancement Description

Allow to type the column name with auto-complete, to make it easier to select the column. For example, even just typing the letter u makes it much faster to find the column user, than scrolling down and having to visually scan all column names.

As a visual aid, the entered filter string should also be highlighted (bold) in the filtered column name results.

Example Use Case

Entering obj should filter the list by column names containing (not just starting with) that string:

Alternatives / Workarounds

n/a

[parse-github-assistant]

Thanks for opening this issue!

• 🎉 We are excited about your ideas for improvement!

[sadakchap]

@mtrezza, just to confirm, we are referring to below dropdowns, correct?

When deleting a column.

When using filter

[mtrezza]

Not in any of the "remove" dialogs, because there we want the user to explicitly enter the column or class name to confirm the deletion. The feature should be added only in the filter dialog (2nd screenshot above).

The typical UI control would be to filter the dropdown list as soon as the user starts typing, showing only the column names that contain (not just start with) the typed string. The user also needs to see what they currently typed, so the UI control becomes a mix of text field and drop down. A visual aid and nice-to-have would be to highlight portions of the text in the column names after which it is filtered.

Here is a quick mock-up:

[patelmilanun]

can we use this component parse-dashboard/src/components/Autocomplete/Autocomplete.react.js

[mtrezza]

Good idea, maybe if that works, and can be styled aesthetically to fit the filter dialog?

[parseplatformorg]

🎉 This change has been released in version 5.2.0-alpha.17

[parseplatformorg]

🎉 This change has been released in version 5.3.0-beta.1