Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add auto-complete typing to column dropdowns #1891

Closed
3 tasks done
mtrezza opened this issue Oct 28, 2021 · 9 comments · Fixed by #2463
Closed
3 tasks done

Add auto-complete typing to column dropdowns #1891

mtrezza opened this issue Oct 28, 2021 · 9 comments · Fixed by #2463
Labels
bounty:$50 Bounty applies for fixing this issue (Parse Bounty Program) state:released Released as stable version state:released-alpha Released as alpha version state:released-beta Released as beta version type:feature New feature or improvement of existing feature

Comments

@mtrezza
Copy link
Member

mtrezza commented Oct 28, 2021

New Feature / Enhancement Checklist

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:

image

Alternatives / Workarounds

n/a

@parse-github-assistant
Copy link

parse-github-assistant bot commented Oct 28, 2021

Thanks for opening this issue!

  • 🎉 We are excited about your ideas for improvement!

@mtrezza mtrezza added type:feature New feature or improvement of existing feature bounty:$20 Bounty applies for fixing this issue (Parse Bounty Program) labels Oct 28, 2021
@mtrezza mtrezza added bounty:$50 Bounty applies for fixing this issue (Parse Bounty Program) and removed bounty:$20 Bounty applies for fixing this issue (Parse Bounty Program) labels Oct 4, 2022
@sadakchap
Copy link
Member

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

When deleting a column.

image

When using filter

image

@mtrezza
Copy link
Member Author

mtrezza commented Oct 15, 2022

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:
image

@patelmilanun
Copy link
Member

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

image

@mtrezza
Copy link
Member Author

mtrezza commented May 30, 2023

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

@parseplatformorg
Copy link
Contributor

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

@parseplatformorg parseplatformorg added the state:released-alpha Released as alpha version label Jun 19, 2023
@parseplatformorg
Copy link
Contributor

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

@parseplatformorg parseplatformorg added the state:released-beta Released as beta version label Sep 15, 2023
@parseplatformorg
Copy link
Contributor

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

@parseplatformorg
Copy link
Contributor

🎉 This change has been released in version 5.3.0

@parseplatformorg parseplatformorg added the state:released Released as stable version label Nov 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bounty:$50 Bounty applies for fixing this issue (Parse Bounty Program) state:released Released as stable version state:released-alpha Released as alpha version state:released-beta Released as beta version type:feature New feature or improvement of existing feature
Projects
None yet
4 participants