search

mi6 / ic-ui-kit

Intelligence Community UI Kit (based on StencilJS)
MIT License
25 stars 26 forks source link

Display a tooltip on the multi-select when the selected option list is truncated #1109

Open GCHQ-Developer-847 opened 1 year ago

GCHQ-Developer-847 commented 1 year ago

Summary

Add a tooltip to the multi-select which is displayed when the list of selected options in the input field is truncated. It should inform the user how many options have been selected.

💬 Description

When the user selects many options, they can't always be displayed fully in the input field and the text is therefore truncated.

To prevent the user having to open the dropdown menu to see how many are selected, a tooltip should be added (which is only displayed when the text is truncated). This should show a count of how many options are selected - rather than a list of the actual options that are selected.

💰 User value

This will make it easier to provide information to the user about their selections without them having to open the dropdown menu.

📝 Acceptance Criteria

Given that I can make multiple selections and I may not be able to see all my selections in the field When I hover over the multi-select field input Then a tooltip should display showing the number of selected options: "5 options selected" And the tooltip should not display when the dropdown menu is open as this information is displayed in the menu.

Additional info

Adding a tooltip will probably involve wrapping the multi-select in an ic-tooltip. This means an extra layer of elements so it would be important to check the accessibility of this - ensuring it doesn't affect screen reader functionality.

GCHQ-Developer-847 commented 1 year ago

Addition to the multi-select, so blocked by #257

MI6-255 commented 6 months ago

Will this need a resize observer, for when the screen size changes, after it has already rendered? (Because the multi-select may become wide enough for the options to no longer be truncated, and therefore the tooltip would no longer need to be displayed).

Consider the performance issues with this

GCHQ-Developer-847 commented 6 months ago

I think it is probably best that this functionality is provided via an optional prop. If a multi-select has hundreds of options, for example, the developer probably wouldn't want a huge tooltip with all the options in it to be displayed.

This wouldn't be an accessibility problem, I don't think, because if this tooltip isn't enabled, the user can just click on the multi-select and look at the selected options in the dropdown menu quite easily.