Fluentui: <Dialog> component does not dismiss

[carruthe]

Bug Report

• __Package version(s)__: 1.12.0
• __Browser and OS versions__: OS X, Safari , got the same issue with Chrome

Describe the issue:

Using the Dialog component, with isOpen attribute set to one of my state variables (defaulted to false). The dialog opens fine, but when I "setState" the variable to false, the dialog won't disappear.

   render() {
        let { showAboutDialog } = this.state

        console.log(`this.state.showAboutDialog = ${showAboutDialog}`);

       // ........ removed for clarity

        return (
            <Fabric ref={(alias) => { if (alias) { this._mainDiv = alias.refs.root } }} className='lsorph-ui-flex-wrapper'>

                <header className='lsorph-header'>
                   {/* ........ removed for clarity */}
                </header>

                <main className='lsorph-main-content'>
                  {/* ........ removed for clarity */}
                </main>

                <footer className='lsorph-footer'>
                 {/* ........ removed for clarity */}
                </footer>

                <Dialog
                    isOpen={showAboutDialog}
                    type={DialogType.normal}
                    onDismiss={() => { this.hideAboutDialog() }}
                    title='All emails together'
                    subText='Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.'
                    isBlocking={false}
                    containerClassName='ms-dialogMainOverride'
                >
                    <ChoiceGroup
                        options={[
                            {
                                key: 'A',
                                text: 'Option A'
                            },
                            {
                                key: 'B',
                                text: 'Option B',
                                checked: true
                            },
                            {
                                key: 'C',
                                text: 'Option C',
                                disabled: true
                            }
                        ]}

                    />
                    {null /** You can also include null values as the result of conditionals */}
                    <DialogFooter>
                        <Button buttonType={ButtonType.primary} onClick={() => { this.hideAboutDialog() }}>Save</Button>
                        <Button onClick={() => { this.hideAboutDialog() }}>Cancel</Button>
                    </DialogFooter>
                </Dialog>

            </Fabric>
        )
    }

    showAboutDialog() {
        this.setState({ showAboutDialog: true })
    }

    hideAboutDialog() {
        this.setState({ showAboutDialog: false })
    }

Video demo
https://youtu.be/cahWlEiD3Zg

I am making use of flex box containers, if it makes any difference, but I don't see why it would affect anything.

Thanks,

Nick

[mdahamiwal]

seems related to #953

[carruthe]

@mdahamiwal - Agreed, seems to be the same issue.

[carruthe]

Turns out, as others have pointed out in #953 , I was importing fabric.min.css from office-ui-fabric-core - switching to importing it from office-ui-fabric-react fixed the problem.