Change throttle to debounce

And add an explanation of whyI think one's more apropriate than the
other for this.
This commit is contained in:
David Baker 2019-08-09 15:30:05 +01:00
parent 78744b8bcf
commit fcdbce1dda

View File

@ -18,7 +18,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import sdk from '../../../index'; import sdk from '../../../index';
import { throttle } from 'lodash'; import { debounce } from 'lodash';
// Invoke validation from user input (when typing, etc.) at most once every N ms. // Invoke validation from user input (when typing, etc.) at most once every N ms.
const VALIDATION_THROTTLE_MS = 200; const VALIDATION_THROTTLE_MS = 200;
@ -118,7 +118,16 @@ export default class Field extends React.PureComponent {
} }
} }
validateOnChange = throttle(() => { /*
* This was changed from throttle to debounce: this is more traditional for
* form validation since it means that the validation doesn't happen at all
* until the user stops typing for a bit (debounce defaults to not running on
* the leading edge). If we're doing an HTTP hit on each validation, we have more
* incentive to prevent validating input that's very unlikely to be valid.
* We may find that we actually want different behaviour for registration
* fields, in which case we can add some options to control it.
*/
validateOnChange = debounce(() => {
this.validate({ this.validate({
focused: true, focused: true,
}); });