diff --git a/docs/v3/upgrade.md b/docs/v3/upgrade.md index 8c1268a..3997618 100644 --- a/docs/v3/upgrade.md +++ b/docs/v3/upgrade.md @@ -81,7 +81,7 @@ const options = reactive({ ``` -## Changed eager mode +## Eager mode With v2, when using eager mode, entered characters appeared after the static mask characters: @@ -100,3 +100,15 @@ mask.masked('1') // -> 1 mask.masked('12') // -> 12 mask.masked('2') // -> 12 ``` + +## Completed behavior for dynamic masks + +In v2 a dynamic mask is considered completed when it matches the longest mask in the array. +For example, when you have enter `1-234`, but not `1-2`: + +```html + +``` + +In v3 a dynamic mask is considered complete if it matches the first matched mask. +So `1-2` and `1-234` are considered complete, but `1-23` is not. diff --git a/src/mask.ts b/src/mask.ts index 8738e75..e3c141d 100644 --- a/src/mask.ts +++ b/src/mask.ts @@ -78,11 +78,9 @@ export class Mask { if (typeof this.opts.mask === 'string') { return length >= this.opts.mask.length - } else if (typeof this.opts.mask === 'function') { - return length >= mask.length } - return this.opts.mask.filter((m) => length >= m.length).length === this.opts.mask.length + return length >= mask.length } private findMask (value: string): string | null { diff --git a/test/mask.test.ts b/test/mask.test.ts index e98a1ab..c107ed9 100644 --- a/test/mask.test.ts +++ b/test/mask.test.ts @@ -770,7 +770,10 @@ test('dynamic mask', () => { expect(mask.unmasked('a123456789012345')).toBe('12345678901234') - expect(mask.completed('12345678901')).toBe(false) + expect(mask.completed('1234567890')).toBe(false) + expect(mask.completed('12345678901')).toBe(true) + expect(mask.completed('123456789012')).toBe(false) + expect(mask.completed('1234567890123')).toBe(false) expect(mask.completed('12345678901234')).toBe(true) })