Fluentui: Callout: Get a crash due to Uncaught Invariant Violation

[jspurlin]

In word online I'm seeing an issue when bringing up a callout (with a point target) that's causing our app to crash.

I believe was introduced by: #10663 ,fyi @dzearing and @JasonGore

This is a High impact bug

Below is the console exception:

Uncaught Invariant Violation: Argument appears to not be a ReactComponent. Keys: x,y
at eval (webpack-internal:///../../common/temp/node_modules/.office.pkgs.visualstudio.com/react-dom/[email protected]/node_modules/react-dom/cjs/react-dom.development.js:27025:32)
at findHostInstanceWithWarning (webpack-internal:///../../common/temp/node_modules/.office.pkgs.visualstudio.com/react-dom/[email protected]/node_modules/react-dom/cjs/react-dom.development.js:27028:11)
at findDOMNode (webpack-internal:///../../common/temp/node_modules/.office.pkgs.visualstudio.com/react-dom/[email protected]/node_modules/react-dom/cjs/react-dom.development.js:27722:14)
at getWindow (webpack-internal:///../../common/temp/node_modules/.office.pkgs.visualstudio.com/@uifabric/utilities/7.3.0_1d11bb06501bc9714a7757ddc6fa6f6b/node_modules/@uifabric/utilities/lib/dom/getWindow.js:31:123)
at Async.requestAnimationFrame (webpack-internal:///../../common/temp/node_modules/.office.pkgs.visualstudio.com/@uifabric/utilities/7.3.0_1d11bb06501bc9714a7757ddc6fa6f6b/node_modules/@uifabric/utilities/lib/Async.js:389:83)
at CalloutContentBase._updateAsyncPosition (webpack-internal:///../../common/temp/node_modules/.office.pkgs.visualstudio.com/office-ui-fabric-react/7.42.0_1d11bb06501bc9714a7757ddc6fa6f6b/node_modules/office-ui-fabric-react/lib/components/Callout/CalloutContent.base.js:234:21)
at CalloutContentBase._this._onComponentDidMount (webpack-internal:///../../common/temp/node_modules/.office.pkgs.visualstudio.com/office-ui-fabric-react/7.42.0_1d11bb06501bc9714a7757ddc6fa6f6b/node_modules/office-ui-fabric-react/lib/components/Callout/CalloutContent.base.js:81:19)
at CalloutContentBase.componentDidMount (webpack-internal:///../../common/temp/node_modules/.office.pkgs.visualstudio.com/office-ui-fabric-react/7.42.0_1d11bb06501bc9714a7757ddc6fa6f6b/node_modules/office-ui-fabric-react/lib/components/Callout/CalloutContent.base.js:162:18)
at commitLifeCycles (webpack-internal:///../../common/temp/node_modules/.office.pkgs.visualstudio.com/react-dom/[email protected]/node_modules/react-dom/cjs/react-dom.development.js:21964:22)
at commitLayoutEffects (webpack-internal:///../../common/temp/node_modules/.office.pkgs.visualstudio.com/react-dom/[email protected]/node_modules/react-dom/cjs/react-dom.development.js:25288:7)

[JasonGore]

10696 was merged to fix similar Callout issues. Do you know if this is still an issue after the merge of #10696?

[dzearing]

This is resolved. Please patch with 7.43.0.

[dzearing]

@whykushal93 is validating, once we get confirmation that the issue has been resolved, please close. Otherwise let us know if there are any scenarios we didn't cover.

[danmarshall]

Hello, I also get a crash for my scenario with a DropDown that I try to call .focus() upon after it is mounted.

this.dropdownRef.current!.focus(true);  // current is null in v6.205.0

I am getting this error in 6.205.0, it works in 6.204.4

[dzearing]

@danmarshall not reproing;

https://codesandbox.io/s/dropdown-focus-vvvro

Feel free to fork if there's a different repro you're trying :)

[danmarshall]

Thanks @dzearing - I will try to create a minimal repro. Until then, can you visit https://danmarshall.github.io/SandDance/app/ and click on "Latitude"

[danmarshall]

For comparison, on our production app https://sanddance.js.org/app/ I am using 6.204.4, getting desired behavior:

[danmarshall]

Ok, I have the minimal repro:
https://codesandbox.io/embed/dropdown-focus-zgujc

import * as React from "react";
import { render } from "react-dom";
import { Dropdown, PrimaryButton } from "office-ui-fabric-react";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
  }

  render() {
    const dd = this.state.clicked ? (
      <PositionedDropDown left={50} top={200} />
    ) : null;

    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <PrimaryButton
          text="focus"
          onClick={() => this.setState({ clicked: true })}
        />
        {dd}
      </div>
    );
  }
}

class PositionedDropDown extends React.Component {
  constructor(props) {
    super(props);
    const { left, top } = props;
    this.state = { left, top };
    this.dropdownRef = React.createRef();
  }
  componentDidMount() {
    this.dropdownRef.current.focus(true);
  }
  render() {
    return (
      <div
        style={{
          position: "absolute",
          left: this.state.left + "px",
          top: this.state.top + "px"
        }}
      >
        <Dropdown
          componentRef={this.dropdownRef}
          options={[
            { key: 0, text: "option 1" },
            { key: 1, text: "option 2" },
            { key: 2, text: "option 3" }
          ]}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Thanks,
Dan

[dzearing]

Awesome, thank you @danmarshall ! I found it.

Dropdown uses the withResponsiveMode decorator. The decorator wants to hold up rendering content until it knows how big things are. This delay is causing the parent to be mounted, and then the child to be mounted.

I'll figure out a better solution.

[dzearing]

Alright, PR out plus test, and will get that merged into 6.0 immediately after. Sorry for the trouble.

[danmarshall]

Hey, no trouble, you guys rock!

[dzearing]

@danmarshall this site is awesome, btw!

[danmarshall]

The office-ui-fabric-react makes it shine! And saved me a TON of work :)

[whykushal93]

@dzearing we see a similar issue for the Dialog componnent. The Dialog Inside componentDidMount tries to focus an inner element. But, it does not seem to work. Because of the recent change to withResponsiveMode decorator, it is not able to find any inner elements to focus.

Do you think the PR have open will also fix that issue ?

cc: @jspurlin @SavannahBourgeois

[dzearing]

This is now fixed in v7.47.0. @danmarshall @whykushal93 @lorejoh12 just a heads up here, this is published now, and I've cherrypicked into v6 as well which is in the queue publishing.

[dzearing]

Verified this is resolved.