Document work arounds
This commit is contained in:
parent
abc046fd16
commit
d1002dc49f
|
@ -30,8 +30,17 @@ export interface LoginProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Login extends React.Component<LoginProps, {}> {
|
export class Login extends React.Component<LoginProps, {}> {
|
||||||
|
/** PROBLEM: <BlurableInput /> only updates when when `blur` event happens.
|
||||||
|
* * No update when you push return key- that's a submit event.
|
||||||
|
* SOLUTION: Intercept the `submit` event and forcibly focus on a hidden
|
||||||
|
* input control, thereby triggering the blur event across all
|
||||||
|
* fields.
|
||||||
|
*/
|
||||||
private hiddenFieldRef: HTMLElement | undefined = undefined;
|
private hiddenFieldRef: HTMLElement | undefined = undefined;
|
||||||
|
|
||||||
|
/** CSS to hide the fake input field used to change focus. */
|
||||||
|
HIDE_ME = { background: "transparent", border: "none", display: "node" };
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
email,
|
email,
|
||||||
|
@ -60,12 +69,14 @@ export class Login extends React.Component<LoginProps, {}> {
|
||||||
<WidgetBody>
|
<WidgetBody>
|
||||||
<form onSubmit={(e) => {
|
<form onSubmit={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
/** Force focus on fake input. Triggers blur on all inputs. */
|
||||||
this.hiddenFieldRef && this.hiddenFieldRef.focus();
|
this.hiddenFieldRef && this.hiddenFieldRef.focus();
|
||||||
setTimeout(() => onSubmit(e), 1);
|
/** Give React time to update stuff before triggering callback. */
|
||||||
|
setTimeout(() => onSubmit(e), 3);
|
||||||
}}>
|
}}>
|
||||||
<div style={{ width: 1, height: 1, overflow: "hidden" }}>
|
<div style={{ width: 1, height: 1, overflow: "hidden" }}>
|
||||||
<input type="checkbox"
|
<input type="text"
|
||||||
style={{ background: "transparent", border: "none", display: "node" }}
|
style={this.HIDE_ME}
|
||||||
ref={(x) => x && (this.hiddenFieldRef = x)} />
|
ref={(x) => x && (this.hiddenFieldRef = x)} />
|
||||||
</div>
|
</div>
|
||||||
<label>
|
<label>
|
||||||
|
|
Loading…
Reference in a new issue