SearchBox autoFocus causes an Uncaught TypeError in office-ui-fabric-react (6.76.0)

[avenezia]

Please provide a reproduction of the bug in a codepen:

https://codepen.io/avenezia/pen/RerEox

Bug Report

• Package version(s): office-ui-fabric-react 6.76.0
• Browser and OS versions: Chrome 69.0.3497.100, Edge 44.17763.1.0 on Windows 10

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Normal

Products/sites affected: Power Query Online

Describe the issue:

While migrating our product to the latest version of office-ui-fabric-react (6.76.0), I noticed a bug with the autoFocus of the SearchBox: if set to true, it will cause a "Uncaught TypeError: Cannot read property 'events' of null".

Actual behavior:

"Uncaught TypeError: Cannot read property 'events' of null" is thrown when the autoFocus of the SearchBox is set to true: the full stack trace can be found in the codepen

Expected behavior:

No Uncaught TypeError to be thrown

[micahgodbolt]

Inputs (and our SearchBox) do not support an autofocus prop

That property seems to only be used on selects https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/autofocus

[gregdardis]

@micahgodbolt inputs do support an autofocus attribute I believe:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Global_%3Cinput%3E_attributes (search for autofocus under attributes)

In JSX though it is autoFocus (note the capital F). https://stackoverflow.com/a/28891210

I would like to investigate this issue if it is worth investigating.

[gregdardis]

If autoFocus is set, _onFocusCapture is called before the ref is set on the root div.
Here is the line that has a problem. this._rootElement.current is null because the ref hasn't been set yet.

facebook/react#7769 is a relevant issue, and I have this workaround working on my branch (using event.currentTarget).

[micahgodbolt]

Doh :D autoFocus is part of the interface...carry on!

[avenezia]

@micahgodbolt @gregdardis Thank you both for the support on this :)

[msft-github-bot]

🎉This issue was addressed in #6566, which has now been successfully released as office-ui-fabric-react@v6.78.1.:tada:

Handy Links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site