[MultiSelect]: Long options that don't fit on screen do not show hover text

[eng618]

Package

carbon-components, carbon-components-react

Browser

Chrome

Package version

latest

Description

When there is a selection in a MultiSelect that is long, the full text should show in a tooltip. Currently, that is not happening...at least by default. I did notice in the

https://react.carbondesignsystem.com/?path=/story/components-multiselect--filterable#usage

CodeSandbox example

https://codesandbox.io/s/multiselect-bug-o5gfi

Steps to reproduce

• visit storyboard
• open the multi-select
• hover over 1st option that is truncated because of its length
• here you will see there are no tooltips displayed to show the full value

The same steps can be viewed with the above CodeSandbox link as well

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[tay1orjones]

Refs https://github.com/carbon-design-system/carbon/issues/2966

Current guidance states a browser-based tooltip should be used:

Avoid having multiple lines of text in a dropdown. If the text is too long for one line, add an ellipsis (…) for overflow content, and accompany with a browser-based tooltip to show the full string of text.

This infers the use of title, but I don't know that we provide a way to set the title on the downshift items in the listbox. I think that's a minimum of what would be needed here. I'm not sure if MultiSelect ever properly handled this.

[antoinog]

Refs #2966

Current guidance states a browser-based tooltip should be used:

Avoid having multiple lines of text in a dropdown. If the text is too long for one line, add an ellipsis (…) for overflow content, and accompany with a browser-based tooltip to show the full string of text.

This infers the use of title, but I don't know that we provide a way to set the title on the downshift items in the listbox. I think that's a minimum of what would be needed here. I'm not sure if MultiSelect ever properly handled this.

7.25 Seemed to have it, as we lost the functionality on upgrading to 7.44 https://codesandbox.io/s/multiselect-bug-forked-ih9e8?file=/package.json

[tay1orjones]

@antoinog I can't find any changes made to MultiSelect or the underlying primitives (downshift, etc) between these two versions.

Here's the full diff between tags: https://github.com/carbon-design-system/carbon/compare/v10.44.0...v10.45.0

I wonder if this could be related to a change made within the browser from an update

[antoinog]

@tay1orjones I think the issue was introduced in 10/7.32 carbon (react) 10/7.31 has tooltips https://codesandbox.io/s/multiselect-bugcarbon31-r87oq?file=/package.json

but not 32 https://codesandbox.io/s/multiselect-bugcarbon32-tlzo5?file=/package.json

https://github.com/carbon-design-system/carbon/compare/v10.31.0...v10.32.0

[antoinog]

@eng618 @tay1orjones Setting useTitleInItem to true works. Pre 32 maybe this was ignored? <MultiSelect id="b" useTitleInItem={true}

[antoinog]

https://react.carbondesignsystem.com/?path=/story/components-multiselect--filterable#usage The story has a Knob to Show Tooltip on hover, which sets useTitleInItem

[tay1orjones]

@antoinog Ah, yes I see that FilterableMultiSelect usage of useTitleInItem was changed slightly in #8178 v10.32.0, though I believe it's always been false by default. The change, linked here, placed the title on the span inside the checkbox wrapper. Previously it was passed directly to the Checkbox component.

Using 10.47.1 (latest) I see see the browser's title tooltip is displayed when useTitleInItem="true". Example codesandbox

I'm going to close this as I think we've resolved the issue here, but let me know if not and we can reopen.