-
Notifications
You must be signed in to change notification settings - Fork 4.9k
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
Filter picker search free input #38907
Conversation
|
}); | ||
|
||
userEvent.type(screen.getByPlaceholderText("Search by Email"), "a@b.com"); | ||
userEvent.hover(screen.getByText("New a@b.com")); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For some reason mantine doesn't work without hovering the item first :(
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It'd be helpful if this comment lived in the code
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍
|
||
userEvent.type(screen.getByLabelText("Filter value"), "a@b.com"); | ||
expect(screen.queryByText("New a@b.com")).not.toBeInTheDocument(); | ||
expect(onChange).not.toHaveBeenCalled(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's try to hit Enter before the assertions
}); | ||
|
||
userEvent.type(screen.getByPlaceholderText("Search by Email"), "a@b.com"); | ||
userEvent.hover(screen.getByText("New a@b.com")); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It'd be helpful if this comment lived in the code
@@ -63,12 +67,15 @@ export function SearchValuePicker({ | |||
value={selectedValues} | |||
searchValue={searchValue} | |||
placeholder={placeholder} | |||
nothingFound={isSearched ? nothingFound : null} | |||
shouldCreate={shouldCreate} | |||
getCreateLabel={searchValue => t`New ${searchValue}`} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking good
Product doc https://www.notion.so/metabase/Free-up-text-input-performance-from-loading-values-in-filters-f70287f73d014794abb60653c6d28e39
Fixes #37906
Previously it wasn't possible to select a value not from the list for "searchable" columns. It becomes a problem when it takes a lot of time to load search results as they are loaded from the customer DB directly. In this case the user is not able to create a filter at all.
Now we allow entering any value, even without waiting for search results (but no duplicates). This is based on
creatable
property of the mantine'sMultiSelect
. I've decided to go withNew {input}
label but this is to be verified with Product.How to verify:
Before
With search results:
![Screenshot 2024-02-19 at 14 46 04](https://private-user-images.githubusercontent.com/8542534/305953375-6a271e90-7c3a-4bb4-b23d-3684180e9a43.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNTQwMTIsIm5iZiI6MTcyMDE1MzcxMiwicGF0aCI6Ii84NTQyNTM0LzMwNTk1MzM3NS02YTI3MWU5MC03YzNhLTRiYjQtYjIzZC0zNjg0MTgwZTlhNDMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDVUMDQyODMyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzY2OTBjZDU4ZDYwOTljNWNkMTg0YTgxMTc2ZjI5YmE4YzhiMmYyZGQ2MTdmMDA4MjA5OWE2NjZhY2U1NjM4NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.iM5x62BYPnRO2bFsV0a1GEQZSlcxRYguXDpIWvyv-hI)
No search results:
![Screenshot 2024-02-19 at 14 46 10](https://private-user-images.githubusercontent.com/8542534/305953288-b7e8a91b-869c-440b-a365-0f473217f1b8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNTQwMTIsIm5iZiI6MTcyMDE1MzcxMiwicGF0aCI6Ii84NTQyNTM0LzMwNTk1MzI4OC1iN2U4YTkxYi04NjljLTQ0MGItYTM2NS0wZjQ3MzIxN2YxYjgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDVUMDQyODMyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzFkMDMwMWMxYTA0YjJlMzgyYTQxZThhZDJlMWY2OGUzZTA0YzAzNTUzYTcxZTNkYjY3ZTcwMjUxNTY1Y2JkYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.GQE8iR06iy3f_Xk2kI6mks1DGcpluayyrn-EMLK2evU)
After
With search results:
![Screenshot 2024-02-19 at 14 39 28](https://private-user-images.githubusercontent.com/8542534/305952910-cd09070b-ab93-460f-aac8-5a1a8ab6805d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNTQwMTIsIm5iZiI6MTcyMDE1MzcxMiwicGF0aCI6Ii84NTQyNTM0LzMwNTk1MjkxMC1jZDA5MDcwYi1hYjkzLTQ2MGYtYWFjOC01YTFhOGFiNjgwNWQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDVUMDQyODMyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZjJlYTg0ZDJjOWNiMDFhYTc4NmI4MDBmNjAwZmIyMzdkMTdjMjUwM2Q3OTEzNDJiYzU2Njg4OGIzZTQxNTUzYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.eEBfJ6bNZ67osSnLofXzGkoBS6E1f8CZYR2lN1WKdXM)
No search results:
![Screenshot 2024-02-19 at 14 39 09](https://private-user-images.githubusercontent.com/8542534/305952981-5d4390aa-c49c-40a6-b0f6-604891f62b0b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNTQwMTIsIm5iZiI6MTcyMDE1MzcxMiwicGF0aCI6Ii84NTQyNTM0LzMwNTk1Mjk4MS01ZDQzOTBhYS1jNDljLTQwYTYtYjBmNi02MDQ4OTFmNjJiMGIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDVUMDQyODMyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9M2M2NTA5MjNmZmE5M2EzMTBkNWI4MDEyMjg1MjAwNGFlMjMwYjQzODE0MTc3NTIwYWU2NDVjYTY0OTVlMjA2YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.hY5nu9sdssBQW7mQSmhMrtOd8WqosBbIODe62UDZZq4)