Spfx office UI fabric Panel not closing on server

[fanago]

Environment Information

Sharepoint 2016
SPfx with react js

• Package version(s): (fill this out)

  "@types/react-addons-test-utils": "0.14.15",
  "@types/react-addons-update": "0.14.14",
  "@types/react-dom": "0.14.18",
  "@types/webpack-env": "1.13.1",
  "formik": "^2.1.4",
  "markdown-loader": "^5.1.0",
  "office-ui-fabric-react-pagination": "0.0.8",
  "react": "^15.4.2",
  "react-dom": "^15.4.2"
  },

• Browser and OS versions: (fill this out if relevant)
  Both in Chrome and edge

Describe the issue:

I am using office-ui-fabric Panel component. The panel open and closes with out any issue in local host(http://localhost:4321/temp/workbench.html), However, when I used the workbench with the server url (https://(siteUrl)/_layouts/15/workbench.aspx), the panel will not close.

     <Panel
     isOpen={true}
     type={PanelType.medium}
     headerText="Add New Contract"
     closeButtonAriaLabel='Close'
     onDismiss={this.onPanelClosed.bind(this)}>
    <TextField
            type="text"
            name="Title"
            onChanged={this.handleTitle}
            label="Title"
          /></Panel>

This is the method to close the panel
onPanelClosed() { this.setState({ show: false }); }

Actual behavior:

Panel not closing

Expected behavior:

Panel should close

If applicable, please provide a codepen repro:

I tried to reproduce but I am using class component and the codepen is treating it as an error.

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

Are you willing to submit a PR to fix? (Yes, No)
no
Requested priority: (Blocking, High, Normal, Low)
Normal
Products/sites affected: (if applicable)
Local development App

[msft-fluent-ui-bot]

Thanks for taking the time to enter an issue. However, it seems that there aren't enough details here for this issue to be actionable.

When issues are created, we need details such as:

1. Which Fluent UI component is causing the issue
2. Which package name and version the component is from
3. Specific, complete steps to reproduce the issue
4. What behaviors and attributes are missing or incorrect
5. What you expected and what is actually happening
6. Confirmation that the problem reproduces in isolation

Without a clear understanding of these details, it's not possible to take clear action on issues. We are unable to meet your expectations, properly address the root cause, and make changes without affecting the expectations of other consumers.

Please provide these additional details as you are able. The default issue template provides an outline of these details and is viewable when creating a new issue. Additionally, if this is an accessibility issue, please see Accessibility Troubleshooting in our wiki for more guidance. If these details cannot be provided, please kindly close the issue.

Thank you for your patience.

[fanago]

Thank you! I just updated the request now, I accidently submitted without detail. Please let me know if you want any more information

[fanago]

This is expected result

This is the actual result

[fanago]

Any updates?

[JustSlone]

@fanago, sorry this issue is fairly complex. It's going to be pretty hard to investigate this without a repro, this also seems to maybe be a SPFX/SharePoint issue rather than one specific to the Fabric UI library (though to be honest it could very well be in Fabric as well or an interaction between Fabric and SPFX)

Some questions and thoughts:

• What version of office-ui-fabric-react are you using, I'm guessing it's provided by SPFX right?
• React 15.4 is fairly old, it's unlikely, but perhaps we are hitting issues due to the old version of React.

[msft-fluent-ui-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!