React-data-grid: cellRangeSelection steals focus from other elements (react-select)

[ZackKnopp]

• Have you already searched for similar issues? Please help us out and double-check first!

• Also, please don't be that person who deletes this template. It's here for a reason.

• Thanks!

---

Which version of React JS are you using?

✅ Officially supported ✅

• [ ] v15.4.x

⚠️ Not officially supported, expect warnings ⚠️

• [ ] v15.5.x
• [ ] v15.6.x

☣️ Not officially supported, expect warnings and errors ☣️

• [x] v16.x.x
  Forked from example and added a select element

---

Which browser are you using?

✅ Officially supported ✅

• [ ] IE 9 / IE 10 / IE 11
• [ ] Edge
• [x] Chrome

⚠️ Not officially supported, but "should work" ⚠️

• [ ] Firefox
• [ ] Safari

---

I'm submitting a ...

• [x] 🐛 Bug Report
• [ ] 💡 Feature Request

👋 Need general support? Not sure about how to use React itself, or how to get started with the Grid?
Please do not submit support request here. Instead see

https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

---

Issue Details

Please include:
- What the current behavior is
- What the desired behvaior is
- (If Bug) Steps to reproduce the issue
- (If Feature) The motivation / use case for the feature

We especially love screenshots / videos of problems, and remember
The Best Issue Is A Pull Request™

When using cellRangeSelection prop in react-data-grid v5.x.x and v6.x.x the data-grid steals focus from other elements on the page, notably a react-select element.

See this demo, which is a fork of the official example for cellRangeSelection, with a select box added in. When the select is clicked, it automatically closes because react-data-grid steals the focus. It works like it should when the cellRangeSelection prop is removed.

[jEnbuska]

Cell focus seems to be buggy in more than one way.
When the page is initially loaded, the first cell steals the pages focus, and this can force the page to scroll down so that the grid becomes visible.
Fork of previous demo

[acycliczebra]

Fixed this with a quick monkey patch on my end, let me know if you are interested in a proper pull request:

class MyDataGrid extends ReactDataGrid {
  componentDidMount() {
    this._mounted = true;
    this.dataGridComponent = document.getElementsByClassName('react-grid-Container')[0] //assumes only one react datagrid component exists
    window.addEventListener('resize', this.metricsUpdated);
    if (this.props.cellRangeSelection) {
      this.dataGridComponent.addEventListener('mouseup', this.onWindowMouseUp);
    }
    this.metricsUpdated();
  }

  componentWillUnmount() {
    this._mounted = false;
    window.removeEventListener('resize', this.metricsUpdated);
    this.dataGridComponent.removeEventListener('mouseup', this.onWindowMouseUp);
  }
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[mareolan]

I'd appreciate if you reopen this issue as cellRangeSelection feature is unusable with this bug (it immediately steals focus from anything whenever mouseup occurs).

[bmakan]

If you don't want to have your own fork, acycliczebra's solution works with 6.1.0.

[puneetmalik]

is this fix going to be merged anytime soon? as someone mentioned correctly, this renders the cell selection functionality essentially useless