diff --git a/components/ConfirmationCodeInput.js b/components/ConfirmationCodeInput.js index 239c85a..2199cae 100644 --- a/components/ConfirmationCodeInput.js +++ b/components/ConfirmationCodeInput.js @@ -193,14 +193,20 @@ export default class ConfirmationCodeInput extends Component { } } + _onKeyPress(e) { if (e.nativeEvent.key === 'Backspace') { + // Return if duration between previous key press and backspace is less than 20ms + if (Math.abs(this.lastKeyEventTimestamp - e.timeStamp) < 20) return; + const { currentIndex } = this.state; const nextIndex = currentIndex > 0 ? currentIndex - 1 : 0; this._setFocus(nextIndex); + } else { + // Record non-backspace key event time stamp + this.lastKeyEventTimestamp = e.timeStamp; } } - _onInputCode(character, index) { const { codeLength, onFulfill, compareWithCode, ignoreCase } = this.props; let newCodeArr = _.clone(this.state.codeArr); diff --git a/example/src/components/ConfirmationCodeInput.js b/example/src/components/ConfirmationCodeInput.js index c9876a2..b6adb84 100644 --- a/example/src/components/ConfirmationCodeInput.js +++ b/example/src/components/ConfirmationCodeInput.js @@ -192,9 +192,15 @@ export default class ConfirmationCodeInput extends Component { _onKeyPress(e) { if (e.nativeEvent.key === 'Backspace') { + // Return if duration between previous key press and backspace is less than 20ms + if (Math.abs(this.lastKeyEventTimestamp - e.timeStamp) < 20) return; + const { currentIndex } = this.state; - const nextIndex = currentIndex > 0 ? currentIndex - 1 : 0; + const nextIndex = currentIndex > 0 ? currentIndex - 1 : 0; this._setFocus(nextIndex); + } else { + // Record non-backspace key event time stamp + this.lastKeyEventTimestamp = e.timeStamp; } } @@ -290,4 +296,4 @@ const styles = StyleSheet.create({ textAlign: 'center', padding: 0 } -}); \ No newline at end of file +});