Fluentui: Dialog will open but not close

[davidye]

Bug Report

• __Package version(s)__: 1.5.3
• __Browser and OS versions__: Chrome, OSX

Describe the issue:

I have a button which opens a Dialog by setting isOpen={true}. The dialog opens. But when I try to close it by setting isOpen={false}, nothing happens. Examining with inspector I see:

<div class="ms-Dialog ms-Dialog--close is-open is-animatingClose">

But it never seems to transition to the actual closed state.

Actual behavior:

Dialog stays open

Expected behavior:

Dialog closes

[menberg]

Same problem here. Also with Panel component. What seems to be missing are the CSS transitions. So the transitionend event never gets fired. As the Dialog and Panel component listen to the transitionend event, they stay open forever.

Strange thing is: while debugging, I attached fabric.min.css 4.1.0 to the page. Afterwards, the CSS animations as well as the opening and closing of the Panel and Dialog component are working.

But: if I attach the latest fabric.min.css (Office UI Fabric Core 5.1.0) to the page, it's a no go: again, no CSS animations :-(

[dzearing]

Strange. @leddie24 can you take a look?

[davidye]

Yeah I was using fabric.min.css 6.0.0. This works for me if I rollback to fabric.min.css 5.0.1

[thiagozimp]

Same thing here with latest version.

[Harley-Adams]

For anyone else who was having a trouble working around this issue,
See ghdocs/readme.md on this repo where it says to load Office UI Fabric styles by linking to the Office UI Fabric CDN. Add the following to the element:

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/5.0.1/css/fabric.min.css">

I was hitting the same issue, and couldn't figure out why I was hitting it in my project but not when I was hosting the sample sites locally. I wasn't including the above 5.0.1 style sheet (so I guess it was defaulting to the latest packaged with the repo) even when referencing older versions of office-ui-fabric-react.

I'd suggest that for this repo we keep the package version of office-ui-fabric-core the same across the framework code/sample site code, although if they were both on ">=5.0.0 <6.0.0" this would have broken the sample site too.

[robvree]

Same issue. Using the latest Fabric UI (1.9.1) and using Fabric Core 6.0.0 from the CDN will not allow dialogs and panels to close. The animationend listener is never called. Rolling back to Fabric core 5.0.1 does fix it.

[legonzian]

This is still an issue in [email protected] ?
I also tried to import the fabric.min.css from [email protected] in my index.js but this rips the component styles completely..

[mikewheaton]

The animations were fixed in Fabric Core PR 959. Fabric Core 7.0.0 should release tomorrow, and then I'll get the Fabric React 3.0.0 beta updated to use it. So this fix will ship with Fabric React 3.0.0

[micahgodbolt]

Modals (which dialogs are based on) no longer use fabric core animations, and are removed from the dom via a setTimeout vs waiting for animation to end.

This should resolve any issues of not having core installed.