Skip to content

Commit 95fd86f

Browse files
committed
fix: 🐛 call <Modal> onElement from componentDidMount
1 parent 9d226f7 commit 95fd86f

File tree

3 files changed

+51
-48
lines changed

3 files changed

+51
-48
lines changed

src/Modal/__story__/story.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ storiesOf('UI/Modal', module)
1111
.add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Modal.md')}))
1212
.add('Basic example', () =>
1313
<div>
14-
<Modal>
14+
<Modal onElement={el => {
15+
el.style.background = 'red';
16+
}}>
1517
foobar
1618
</Modal>
1719
</div>

src/Modal/index.ts

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -48,52 +48,8 @@ export class Modal extends Component<IModalProps, IModalState> {
4848

4949
componentDidMount () {
5050
on(document, 'keydown', this.onKey);
51-
}
52-
53-
componentWillUnmount () {
54-
off(document, 'keydown', this.onKey);
55-
56-
const siblings = Array.from(document.body.children);
57-
58-
for (let i = 0; i < siblings.length; i++) {
59-
const sibling = siblings[i] as HTMLElement;
60-
const sib = sibling as any;
61-
62-
if (sibling.hasAttribute(ignoreAttribute)) {
63-
continue;
64-
}
65-
66-
if (sibling === this.el) {
67-
continue;
68-
}
69-
70-
if (!sib.__libreact_lock) {
71-
continue;
72-
}
73-
74-
if (sib.__libreact_lock.owner !== this) {
75-
continue;
76-
}
7751

78-
const lock = sib.__libreact_lock;
79-
80-
sib.inert = lock.inert;
81-
sibling.style.setProperty('pointer-events', lock.pointerEvents);
82-
sibling.style.setProperty('user-select', lock.userSelect);
83-
sibling.style.setProperty('filter', lock.filter || 'none');
84-
85-
sibling.removeAttribute('aria-hidden');
86-
delete sib.__libreact_lock;
87-
}
88-
89-
// Focus previously active element.
90-
if (this.activeEl && (this.activeEl as any).focus) {
91-
(this.activeEl as any).focus();
92-
}
93-
}
94-
95-
onElement = (el) => {
96-
this.el = el;
52+
const {el} = this;
9753

9854
el.setAttribute('role', 'dialog');
9955
el.classList.add('dialog');
@@ -146,6 +102,52 @@ export class Modal extends Component<IModalProps, IModalState> {
146102
}
147103

148104
(this.props.onElement || noop)(el);
105+
}
106+
107+
componentWillUnmount () {
108+
off(document, 'keydown', this.onKey);
109+
110+
const siblings = Array.from(document.body.children);
111+
112+
for (let i = 0; i < siblings.length; i++) {
113+
const sibling = siblings[i] as HTMLElement;
114+
const sib = sibling as any;
115+
116+
if (sibling.hasAttribute(ignoreAttribute)) {
117+
continue;
118+
}
119+
120+
if (sibling === this.el) {
121+
continue;
122+
}
123+
124+
if (!sib.__libreact_lock) {
125+
continue;
126+
}
127+
128+
if (sib.__libreact_lock.owner !== this) {
129+
continue;
130+
}
131+
132+
const lock = sib.__libreact_lock;
133+
134+
sib.inert = lock.inert;
135+
sibling.style.setProperty('pointer-events', lock.pointerEvents);
136+
sibling.style.setProperty('user-select', lock.userSelect);
137+
sibling.style.setProperty('filter', lock.filter || 'none');
138+
139+
sibling.removeAttribute('aria-hidden');
140+
delete sib.__libreact_lock;
141+
}
142+
143+
// Focus previously active element.
144+
if (this.activeEl && (this.activeEl as any).focus) {
145+
(this.activeEl as any).focus();
146+
}
147+
}
148+
149+
onElement = (el) => {
150+
this.el = el;
149151
};
150152

151153
onKey = (event) => {

src/Overlay/index.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export class Overlay extends Component<IOverlayProps, IOverlayState> {
2626
};
2727

2828
componentDidMount () {
29+
(this.props.onElement || noop)(this.el);
2930
document.body.classList.add(classNameBodyNoScroll);
3031
}
3132

@@ -60,8 +61,6 @@ export class Overlay extends Component<IOverlayProps, IOverlayState> {
6061
}, 35);
6162

6263
on(el, 'click', this.onClick);
63-
64-
(this.props.onElement || noop)(el);
6564
};
6665

6766
onClick = (event) => {

0 commit comments

Comments
 (0)