react-select: React-Select component with properties crash Firefox on Windows 10

Affects Firefox 51.0.1 on Windows 10 32 and 64 bit

When loading a React-Select component that has properties set causes the browser window to crash.

let props = this.props;
        return (
                <ReactSelect {...props} noResultsText={ '' }/>
        );

This loads fine:

let props = this.props;
        return (
                <ReactSelect/>
        );

Crash report: https://crash-stats.mozilla.com/report/index/20c12273-27b2-4e1c-b49f-874492170131

cc @peixian @tab1293

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 8
  • Comments: 15 (3 by maintainers)

Commits related to this issue

Most upvoted comments

It appears that Firefox is getting stuck in some kind of infinite loop due to incorrect use of aria-owns attribute. Here’s the W3C spec on aria-owns:

https://www.w3.org/TR/wai-aria/states_and_properties#aria-owns

In Select.js, line 879, when isOpen is false, the component assigns this._instancePrefix + '-value' to aria-owns. That value corresponds to a DOM node which is a parent, and thus has a hierarchical relationship, breaking the W3C spec.

If you visit the demo in Chrome (https://jedwatson.github.io/react-select/) and inspect the HTML, you’ll see that in the situation when the component would be breaking Firefox, Chrome has intelligently removed the offending aria-owns value.

cc: @critesjm @pagevest

PR with a fix is out: #1556

We debugged the problem with the component. It was happening when we were using searchable property as false with React-Select component. Quite weird, but we added a hack around it and resolved the issue.