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

Feat: improving multiselect dropdown #539

Merged
merged 3 commits into from
Jul 27, 2023
Merged

Feat: improving multiselect dropdown #539

merged 3 commits into from
Jul 27, 2023

Conversation

f-necas
Copy link
Collaborator

@f-necas f-necas commented Jul 24, 2023

Search input in multiselect dropdown is improved by :

  • Removing outlin when input is focused
  • Focusing directly this input
  • Handle arrow keyboard inputs between input and checkboxes

@github-actions
Copy link
Contributor

github-actions bot commented Jul 24, 2023

Affected libs: feature-search, feature-record, feature-router, feature-map, feature-dataviz, ui-inputs, feature-editor, ui-elements, feature-catalog, ui-catalog, ui-search,
Affected apps: metadata-editor, datahub, demo, webcomponents, search, map-viewer, metadata-converter, datafeeder,

  • 🚀 Build and deploy storybook and demo on GitHub Pages
  • 📦 Build and push affected docker images

@fgravin fgravin added this to the 1.1.0 milestone Jul 27, 2023
@f-necas f-necas requested a review from jahow July 27, 2023 12:10
@github-actions
Copy link
Contributor

GitHub Pages links:

🚧 building in progress... 🚧

@jahow
Copy link
Collaborator

jahow commented Jul 27, 2023

I think this looks very good, thanks!

Using a focus trap might be too radical for the search input since then the tab key no longer allows us to navigate through the options. I guess we could introduce our own gnUiAutofocus directive to do that? See this article for example https://davidmcintosh.medium.com/auto-focusing-an-angular-input-the-easy-way-part-2-directives-ac9dc9a7ec73

Or: https://netbasal.com/autofocus-that-works-anytime-in-angular-apps-68cb89a3f057

(there might be other libraries for that as well)

@f-necas
Copy link
Collaborator Author

f-necas commented Jul 27, 2023

Thanks @jahow for your review. I've updated the code in order to keep keyboard accessibility working.

Outline is also set to the full search div.

@f-necas f-necas merged commit 4fc39cc into main Jul 27, 2023
5 checks passed
@f-necas f-necas deleted the multiselect-dropdown branch July 28, 2023 08:34
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.

4 participants