Fluentui: No tooltip on first breadcrumb item

[barisbikmaz]

Bug Report

• __Package version(s)__: 6.36.0
• __Browser and OS versions__: Internet Explorer 11 & Firefox 61.01

Priorities and help requested (not applicable if asking question):

Requested priority: Normal

Describe the issue:

If the first item of the breadcrumb has an overflow then no tooltip is shown. Assume then name of the first breadcrumb level is "First Breadcrumb Item" and navigation is looks like that:

First Breadc .... > Level 2 > Level 3

Actual behavior:

When hovering over "First Breadc ..." no tooltip is shown

Expected behavior:

When hovering over "First Breadc ..." a tooltip with the full name "First Breadcrumb Item" should be shown.

[natalieethell]

Do you have a repro of this? Here is a CodePen where it seems to be working for me: https://codepen.io/naethell/pen/PQXWBr

[aditima]

Hi @barisbikmaz - could you please help us with a repro here? seems to be working as expected here: https://codepen.io/naethell/pen/PQXWBr

[barisbikmaz]

Hi @aditima @natalieethell
Seems to be a special case on IE 11. We are creating Word add-ins and the addins are only running on IE 11.
The tooltip disappears when the item does not have a href property and the onClick is set directly.

Repro Here: https://codepen.io/anon/pen/gvEzME

[aditima]

@barisbikmaz - thanks! We did not try IE11 before and I do see it now. We'll look into it,

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Fabric React!

[KevinTCoughlin]

@barisbikmaz it looks like the issue here is the first item does not have an href defined. If I add one then I can see the tool-tip with the same breadcrumb structure in both IE and Chrome. If its absent as it is in https://codepen.io/anon/pen/gvEzME then neither browser renders the tool-tip.

The href I added to test was href: '#/examples/breadcrumb',. You can see it here: https://codepen.io/kevintcoughlin/pen/XEwXEP

Are you able to try that workaround or does it produce invalid HTML for your scenario?

Given that subsequent breadcrumb items do render the tool-tip w/o an href it seems like this should be supported. Thoughts @aditima @natalieethell?

[KevinTCoughlin]

Note that this doesn't seem isolated to IE 11 unless I'm missing something in the initial bug report.

[KevinTCoughlin]

Working on a fix. Also repros in FF 60.0b12 (64-bit), but not Chrome.

[KevinTCoughlin]

The bug has something to do with how FF & IE handle event delegation with <button /> vs. webkit-based browsers. Still working on a resolution. The href workaround works because it causes Fabric to render an <a> instead of a <button>.

Here's an isolated example: https://codepen.io/kevintcoughlin/pen/wjBYLK?editors=1010

[KevinTCoughlin]

OK, the problem here is a difference between WebKit and non-WebKit browsers. Non-WebKit browsers expect <button> nodes to only contain text. Because of this the event isn't delegated to its children.

So in the case of the breadcrumb component rendering a <Link/> and the <Link/> rendering as a button when the item's href is absent we run into this browser inconsistency. The <button/>'s inner <TooltipHost/> component never receives the mouseenter event and the tool-tip is never shown in non-WebKit browsers.

I've sent this info along to the team for discussion on a proper fix as this isn't isolated to <Breadcrumb/>. Here's a CodePen demonstrating that. Will circle back with a solution once we reach a consensus.

I still recommend the workaround above in the meantime so that you're unblocked.

Here are the relevant LoC:

• https://github.com/OfficeDev/office-ui-fabric-react/blob/88a66209aa82f633e3470b71c7e661c1514e01f7/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx#L166
• https://github.com/OfficeDev/office-ui-fabric-react/blob/88a66209aa82f633e3470b71c7e661c1514e01f7/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx#L59

[stale[bot]]

This issue has been automatically marked as stale because it has not activity for 30 days. It will be closed if no further activity occurs within 14 days of this comment. Thank you for your contributions to Fabric React!
Why am I receiving this notification?

[stale[bot]]

This issue has been automatically closed because it has not had recent activity after being marked as stale. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to Fabric React!
Why am I receiving this notification?

[barisbikmaz]

Still an issue on office-ui-fabric-react 6.36.0