Open GCHQ-Developer-847 opened 1 year ago
Addition to the multi-select, so blocked by #257
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
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.
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.