Skip to content
This repository has been archived by the owner on Feb 21, 2023. It is now read-only.

Commit

Permalink
fix(Focus): add helper element to access wrapping element
Browse files Browse the repository at this point in the history
fixes #8
  • Loading branch information
TheSharpieOne committed Apr 4, 2017
1 parent 4d4117e commit d62652f
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 4 deletions.
4 changes: 2 additions & 2 deletions __test__/BlockUi.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -267,11 +267,11 @@ describe('BlockUi', function() {
it('should store the focused element and focus on the top focus', () => {
const wrapper = shallow(<BlockUi blocking={false}><input /></BlockUi>);
const instance = wrapper.instance();
instance.wrapper = {contains: sinon.stub().returns(true)};
instance.helper = {parentNode: {contains: sinon.stub().returns(true)}};
wrapper.find('input').simulate('click');
instance.componentWillReceiveProps({blocking: true});
expect(instance.focused).to.equal(document.activeElement);
expect(instance.wrapper.contains).to.have.been.called;
expect(instance.helper.parentNode.contains).to.have.been.called;
});
});
});
Expand Down
6 changes: 4 additions & 2 deletions src/BlockUi.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,8 @@ class BlockUi extends Component {
if (nextProps.blocking !== this.props.blocking){
if (nextProps.blocking) {
// blocking started
if (this.wrapper && this.wrapper.contains(document.activeElement)) {
if (this.helper && this.helper.parentNode && this.helper.parentNode.contains
&& this.helper.parentNode.contains(document.activeElement)) {
this.focused = document.activeElement;
// https://www.tjvantoll.com/2013/08/30/bugs-with-document-activeelement-in-internet-explorer/#blurring-the-body-switches-windows-in-ie9-and-ie10
if(this.focused && this.focused !== document.body) {
Expand Down Expand Up @@ -91,7 +92,7 @@ class BlockUi extends Component {
const renderChilds = !blocking || renderChildren;

return (
<Tag {...attributes} className={classes} aria-busy={blocking} ref={c => this.wrapper = c}>
<Tag {...attributes} className={classes} aria-busy={blocking}>
{blocking &&
<div tabIndex="0" onKeyUp={this.tabbedUpTop} onKeyDown={this.tabbedDownTop} ref={c => this.topFocus = c} />}
{renderChilds && children}
Expand All @@ -109,6 +110,7 @@ class BlockUi extends Component {
</div>
</div>
}
<span ref={c => this.helper = c} />
</Tag>
);
}
Expand Down

0 comments on commit d62652f

Please sign in to comment.