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

Clickable search filter options #4618

Merged
merged 13 commits into from
Sep 6, 2023
Merged

Conversation

kwasniew
Copy link
Contributor

@kwasniew kwasniew commented Sep 6, 2023

About the changes

Screen.Recording.2023-09-06.at.12.14.38.mov

Main changes:

  • filter and search hints are clickable
  • combined filter and search hint is taken from the first data table item. It guarantees that we get a result.
  • we left only one filter hint in a combined search and filter hint to keep it simple

Important files

Discussion points

@vercel
Copy link

vercel bot commented Sep 6, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
unleash-monorepo-frontend ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 6, 2023 10:16am
1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
unleash-docs ⬜️ Ignored (Inspect) Visit Preview Sep 6, 2023 10:16am

@@ -148,7 +149,8 @@ export const Search = ({
<Tooltip title="Clear search query" arrow>
<IconButton
size="small"
onClick={() => {
onClick={e => {
e.stopPropagation(); // prevent outside click from the lazily added element
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

search container ref couldn't see the icon button that is added in a conditional render. As a result the IconButton is not considered to be part of the searchContainerRef. It means that it was considered as a click outside of the searchContainerRef which closes the search. We don't want that so we stop event propagation.

/>
</div>
<SearchSuggestions
onSuggestion={suggestion => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when people click on a suggestion we change the input and auto focus the input

}) => {
const searchContext = getSearchContext();

const randomRow = useMemo(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was generating combined filter and search hints that returned 0 results

Copy link
Contributor

@FredrikOseberg FredrikOseberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@kwasniew kwasniew merged commit caff040 into main Sep 6, 2023
@kwasniew kwasniew deleted the clickable-search-filter-options branch September 6, 2023 10:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants