const SELECTOR_INPUT = 'input'
// Events that should refresh the active-slot highlight as the caret moves
-const SYNC_EVENTS = ['blur', 'keyup', 'click', 'select']
+const SYNC_EVENTS = ['blur', 'keyup', 'select']
const CLASS_NAME_INPUT = 'otp-input'
const CLASS_NAME_RENDERED = 'otp-rendered'
this._type = TYPES[this._config.type] || TYPES.numeric
this._length = this._resolveLength()
this._slots = []
+ // Tracks whether focus was triggered by a click so we can respect the
+ // clicked slot instead of jumping to the first empty one
+ this._pointerActive = false
+ // Slot index from the most recent tap, applied once focus settles
+ this._pointerIndex = 0
this._setupInput()
this._renderSlots()
focus() {
this._input.focus()
- // Place the caret after the last entered character
- const end = this._input.value.length
- this._input.setSelectionRange(end, end)
+ // Select the first empty slot (or the last one when the value is full)
+ this._selectSlot(this._firstEmptyIndex())
this._render()
}
dispose() {
EventHandler.off(this._input, 'input', this._onInput)
+ EventHandler.off(this._input, 'beforeinput', this._onBeforeInput)
EventHandler.off(this._input, 'focus', this._onFocus)
+ EventHandler.off(this._input, 'pointerdown', this._onPointerDown)
+ EventHandler.off(document, 'selectionchange', this._onSelectionChange)
for (const type of SYNC_EVENTS) {
EventHandler.off(this._input, type, this._onSync)
}
_addEventListeners() {
// Listeners are attached with bare event names (not namespaced) because
- // `input` is not in EventHandler's native-events list; we keep references
- // so they can be removed on dispose.
+ // `input`, `beforeinput`, and `selectionchange` are not in EventHandler's
+ // native-events list; we keep references so they can be removed on dispose.
this._onInput = () => this._handleInput()
- this._onFocus = () => this.focus()
+ this._onBeforeInput = event => this._handleBeforeInput(event)
+ this._onPointerDown = event => this._handlePointerDown(event)
+ this._onFocus = () => {
+ if (this._pointerActive) {
+ // A tap focused the input natively; position the caret on the clicked
+ // slot now that focus has settled (doing this before native focus would
+ // make iOS/iPadOS raise then immediately dismiss the keyboard)
+ this._pointerActive = false
+ this._selectSlot(this._pointerIndex)
+ this._render()
+ return
+ }
+
+ // Keyboard (Tab) focus lands on the first empty slot
+ this._selectSlot(this._firstEmptyIndex())
+ this._render()
+ }
+
this._onSync = () => this._render()
+ this._onSelectionChange = () => {
+ if (document.activeElement === this._input) {
+ this._render()
+ }
+ }
EventHandler.on(this._input, 'input', this._onInput)
+ EventHandler.on(this._input, 'beforeinput', this._onBeforeInput)
EventHandler.on(this._input, 'focus', this._onFocus)
+ EventHandler.on(this._input, 'pointerdown', this._onPointerDown)
+ EventHandler.on(document, 'selectionchange', this._onSelectionChange)
// Keep the active-slot highlight in sync with the caret
for (const type of SYNC_EVENTS) {
}
}
+ // Bulk path: paste, SMS autofill, or a programmatic value change land here as
+ // a single multi-character `input` event. Single keystrokes are handled by
+ // `_handleBeforeInput` (overwrite semantics) and never reach this method.
_handleInput() {
const sanitized = this._sanitize(this._input.value)
if (sanitized !== this._input.value) {
this._input.value = sanitized
}
- this._render()
+ // Place the caret on the first empty slot after a paste/autofill
+ if (document.activeElement === this._input) {
+ this._selectSlot(this._firstEmptyIndex())
+ }
- EventHandler.trigger(this._element, EVENT_INPUT, { value: this._input.value })
+ this._afterValueChange()
+ }
+
+ // Intercept single-character typing and backspace so each slot is overwritten
+ // in place rather than inserting and shifting the rest of the value. Anything
+ // else (paste, autofill, IME composition) falls through to `_handleInput`.
+ _handleBeforeInput(event) {
+ const { inputType, data } = event
+
+ if (inputType === 'insertText' && data && data.length === 1) {
+ event.preventDefault()
+
+ const char = this._sanitize(data)
+ if (!char) {
+ return
+ }
+
+ const index = Math.min(this._input.selectionStart ?? 0, this._length - 1)
+ const chars = [...this._input.value]
+ chars[index] = char
+ this._input.value = chars.join('').slice(0, this._length)
+
+ this._selectSlot(index + 1)
+ this._afterValueChange()
+ return
+ }
+
+ if (inputType === 'deleteContentBackward') {
+ event.preventDefault()
+
+ const start = this._input.selectionStart ?? 0
+ const end = this._input.selectionEnd ?? start
+ const chars = [...this._input.value]
+
+ if (end > start) {
+ // A filled slot is selected: clear it and keep the caret in place
+ chars.splice(start, end - start)
+ this._input.value = chars.join('')
+ this._selectSlot(start)
+ } else if (start > 0) {
+ // Collapsed caret: remove the previous character and step back
+ chars.splice(start - 1, 1)
+ this._input.value = chars.join('')
+ this._selectSlot(start - 1)
+ }
+
+ this._afterValueChange()
+ }
+ }
+
+ _handlePointerDown(event) {
+ const index = this._slotIndexFromPoint(event.clientX)
+ if (index === null) {
+ return
+ }
+
+ // Don't let the caret land past the first empty slot
+ const target = Math.min(index, this._firstEmptyIndex())
+
+ if (document.activeElement === this._input) {
+ // Already focused (keyboard is up): take over caret placement from the
+ // browser. Safe to preventDefault here — it won't dismiss the keyboard.
+ event.preventDefault()
+ this._selectSlot(target)
+ this._render()
+ return
+ }
+
+ // Not yet focused: let the browser focus the input natively so the
+ // on-screen keyboard is raised by the user's tap. Position the caret in the
+ // focus handler once focus settles.
+ this._pointerActive = true
+ this._pointerIndex = target
+ }
+
+ // Map a viewport x-coordinate to the slot under it, clamped to the last slot
+ _slotIndexFromPoint(x) {
+ for (const [index, slot] of this._slots.entries()) {
+ if (x <= slot.getBoundingClientRect().right || index === this._slots.length - 1) {
+ return index
+ }
+ }
+ return null
+ }
+
+ _afterValueChange() {
+ this._render()
+ EventHandler.trigger(this._element, EVENT_INPUT, { value: this._input.value })
this._checkComplete()
}
+ _firstEmptyIndex() {
+ return Math.min(this._input.value.length, this._length - 1)
+ }
+
+ // Represent the active slot as a selection: a filled slot is selected so the
+ // next keystroke overwrites it; an empty slot gets a collapsed caret.
+ _selectSlot(index) {
+ const clamped = Math.max(0, Math.min(index, this._length - 1))
+ const end = clamped < this._input.value.length ? clamped + 1 : clamped
+ this._input.setSelectionRange(clamped, end)
+ }
+
_sanitize(value) {
return value.replace(this._type.filter, '').slice(0, this._length)
}
input.dispatchEvent(createEvent('input'))
}
+ // The compiled CSS lays the slots out horizontally, but the unit test DOM has
+ // no stylesheet so the generated `<div>`s stack vertically (identical x-range).
+ // Force an inline horizontal layout so coordinate-based hit testing is
+ // deterministic when exercising pointer/tap behavior.
+ const layoutSlotsHorizontally = (otpEl, slotWidth = 30) => {
+ for (const slot of otpEl.querySelectorAll('.otp-slot, .otp-separator')) {
+ slot.style.display = 'inline-block'
+ slot.style.width = `${slotWidth}px`
+ slot.style.margin = '0'
+ slot.style.padding = '0'
+ }
+ }
+
+ const pointerDownOnSlot = (input, slot) => {
+ const { left, width } = slot.getBoundingClientRect()
+ input.dispatchEvent(new MouseEvent('pointerdown', {
+ bubbles: true, cancelable: true, clientX: left + (width / 2)
+ }))
+ }
+
+ const beforeInput = (input, options) =>
+ input.dispatchEvent(new InputEvent('beforeinput', { bubbles: true, cancelable: true, ...options }))
+
describe('VERSION', () => {
it('should return plugin version', () => {
expect(OtpInput.VERSION).toEqual(jasmine.any(String))
})
})
+ describe('interaction', () => {
+ it('should position the active slot from the tapped coordinate', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ const otp = new OtpInput(otpEl)
+ const input = otpEl.querySelector('input')
+ otp.setValue('123456')
+
+ const slots = otpEl.querySelectorAll('.otp-slot')
+ // The input is already focused (keyboard up), so a tap repositions the
+ // caret immediately based on its x-coordinate
+ input.focus()
+ const { left, width } = slots[0].getBoundingClientRect()
+ input.dispatchEvent(new MouseEvent('pointerdown', {
+ bubbles: true, cancelable: true, clientX: left + (width / 2)
+ }))
+
+ expect(input.selectionStart).toEqual(0)
+ // A filled slot is selected so the next keystroke overwrites it
+ expect(input.selectionEnd).toEqual(1)
+ expect(slots[0]).toHaveClass('otp-slot-active')
+ })
+
+ it('should overwrite the active slot instead of inserting', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ const otp = new OtpInput(otpEl)
+ const input = otpEl.querySelector('input')
+ otp.setValue('123456')
+
+ input.focus()
+ input.setSelectionRange(2, 3)
+ input.dispatchEvent(new InputEvent('beforeinput', {
+ inputType: 'insertText', data: '9', bubbles: true, cancelable: true
+ }))
+
+ expect(input.value).toEqual('129456')
+ // Caret advances to the next slot
+ expect(input.selectionStart).toEqual(3)
+ })
+
+ it('should delete the previous character on backspace', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ const otp = new OtpInput(otpEl)
+ const input = otpEl.querySelector('input')
+ otp.setValue('123')
+
+ input.focus()
+ input.setSelectionRange(3, 3)
+ input.dispatchEvent(new InputEvent('beforeinput', { inputType: 'deleteContentBackward', bubbles: true, cancelable: true }))
+
+ expect(input.value).toEqual('12')
+ expect(input.selectionStart).toEqual(2)
+ })
+
+ it('should focus the first empty slot on keyboard focus', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ const otp = new OtpInput(otpEl)
+ const input = otpEl.querySelector('input')
+ otp.setValue('12')
+
+ input.focus()
+
+ expect(input.selectionStart).toEqual(2)
+ expect(otpEl.querySelectorAll('.otp-slot')[2]).toHaveClass('otp-slot-active')
+ })
+
+ it('should swallow a disallowed character on beforeinput', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ new OtpInput(otpEl) // eslint-disable-line no-new
+ const input = otpEl.querySelector('input')
+
+ input.focus()
+ const event = new InputEvent('beforeinput', {
+ inputType: 'insertText', data: 'a', bubbles: true, cancelable: true
+ })
+ input.dispatchEvent(event)
+
+ expect(input.value).toEqual('')
+ expect(event.defaultPrevented).toBeTrue()
+ })
+
+ it('should position the caret from the tap only after the input focuses natively (iPadOS keyboard fix)', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ const otp = new OtpInput(otpEl)
+ const input = otpEl.querySelector('input')
+ otp.setValue('123456')
+
+ const slots = otpEl.querySelectorAll('.otp-slot')
+ // Input is not yet focused: a tap must NOT reposition the caret itself
+ // (that would let the browser raise then immediately dismiss the keyboard).
+ // The tapped slot is only remembered until focus settles.
+ pointerDownOnSlot(input, slots[0])
+ expect(document.activeElement).not.toEqual(input)
+
+ // Focus settles (the browser focuses the input from the same tap)
+ input.focus()
+
+ // Caret lands on the tapped slot (0), not the first-empty/last slot (5)
+ // that a plain keyboard focus would choose
+ expect(input.selectionStart).toEqual(0)
+ expect(input.selectionEnd).toEqual(1)
+ expect(slots[0]).toHaveClass('otp-slot-active')
+ })
+
+ it('should clamp a tap beyond the filled slots to the first empty slot', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ const otp = new OtpInput(otpEl)
+ const input = otpEl.querySelector('input')
+ otp.setValue('12')
+ layoutSlotsHorizontally(otpEl)
+
+ const slots = otpEl.querySelectorAll('.otp-slot')
+ input.focus()
+ // Move the caret away from the default first-empty position first
+ input.setSelectionRange(0, 1)
+
+ // Tap the far right (last) slot while only two of six are filled
+ pointerDownOnSlot(input, slots[5])
+
+ // The caret is clamped to the first empty slot (index 2), not slot 5
+ expect(input.selectionStart).toEqual(2)
+ expect(slots[2]).toHaveClass('otp-slot-active')
+ })
+
+ it('should clear the selected slot and keep the caret on backspace', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ const otp = new OtpInput(otpEl)
+ const input = otpEl.querySelector('input')
+ otp.setValue('123456')
+
+ input.focus()
+ // A filled slot is selected (as the active slot always is)
+ input.setSelectionRange(2, 3)
+ beforeInput(input, { inputType: 'deleteContentBackward' })
+
+ expect(input.value).toEqual('12456')
+ expect(input.selectionStart).toEqual(2)
+ })
+
+ it('should do nothing on backspace at the start of an empty field', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ new OtpInput(otpEl) // eslint-disable-line no-new
+ const input = otpEl.querySelector('input')
+
+ input.focus()
+ input.setSelectionRange(0, 0)
+ const event = new InputEvent('beforeinput', {
+ inputType: 'deleteContentBackward', bubbles: true, cancelable: true
+ })
+ input.dispatchEvent(event)
+
+ expect(input.value).toEqual('')
+ expect(event.defaultPrevented).toBeTrue()
+ })
+
+ it('should append into an empty slot when typing at the caret', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ const otp = new OtpInput(otpEl)
+ const input = otpEl.querySelector('input')
+ otp.setValue('12')
+
+ input.focus()
+ input.setSelectionRange(2, 2)
+ beforeInput(input, { inputType: 'insertText', data: '3' })
+
+ expect(input.value).toEqual('123')
+ expect(input.selectionStart).toEqual(3)
+ })
+
+ it('should place the caret on the first empty slot after a paste/autofill', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ new OtpInput(otpEl) // eslint-disable-line no-new
+ const input = otpEl.querySelector('input')
+
+ input.focus()
+ // A paste lands as a single multi-character input event
+ typeInto(input, '123')
+
+ expect(input.value).toEqual('123')
+ expect(input.selectionStart).toEqual(3)
+ expect(input.selectionEnd).toEqual(3)
+ })
+
+ it('should keep the active slot in sync on selectionchange', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ const otp = new OtpInput(otpEl)
+ const input = otpEl.querySelector('input')
+ otp.setValue('123456')
+
+ input.focus()
+ input.setSelectionRange(3, 4)
+ document.dispatchEvent(new Event('selectionchange'))
+
+ expect(otpEl.querySelectorAll('.otp-slot')[3]).toHaveClass('otp-slot-active')
+ })
+ })
+
+ describe('focus', () => {
+ it('should focus the input and select the first empty slot', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ const otp = new OtpInput(otpEl)
+ const input = otpEl.querySelector('input')
+ otp.setValue('123')
+
+ otp.focus()
+
+ expect(document.activeElement).toEqual(input)
+ expect(input.selectionStart).toEqual(3)
+ expect(otpEl.querySelectorAll('.otp-slot')[3]).toHaveClass('otp-slot-active')
+ })
+
+ it('should select the last slot when the value is already full', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ const otp = new OtpInput(otpEl)
+ const input = otpEl.querySelector('input')
+ otp.setValue('123456')
+
+ otp.focus()
+
+ // Clamp to the last slot and select it so the next keystroke overwrites it
+ expect(input.selectionStart).toEqual(5)
+ expect(input.selectionEnd).toEqual(6)
+ })
+ })
+
describe('mask', () => {
it('should render the mask character but keep the real value', () => {
fixtureEl.innerHTML = getOtpHtml('data-bs-mask="true"')
expect(fixtureEl.querySelector('.otp-slots')).toBeNull()
expect(fixtureEl.querySelector('.otp').classList.contains('otp-rendered')).toBeFalse()
})
+
+ it('should stop intercepting beforeinput after dispose', () => {
+ fixtureEl.innerHTML = getOtpHtml()
+
+ const otpEl = fixtureEl.querySelector('.otp')
+ const otp = new OtpInput(otpEl)
+ const input = otpEl.querySelector('input')
+
+ otp.dispose()
+
+ // The beforeinput listener is gone, so the event is no longer prevented
+ const event = new InputEvent('beforeinput', {
+ inputType: 'insertText', data: '1', bubbles: true, cancelable: true
+ })
+ input.dispatchEvent(event)
+
+ expect(event.defaultPrevented).toBeFalse()
+ })
})
describe('getInstance', () => {
projects / thirdparty / bootstrap.git / commitdiff
