Fix OTP input ignoring groups when resolving the length (#3191)

Co-authored-by: codecalm <codecalm@gmail.com>

.changeset/fix-otp-input-groups-length.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed the OTP input ignoring `groups` for its length when neither `length` nor `maxlength` is set.

core/js/src/otp-input.ts

@@ -191,7 +191,16 @@ class OtpInput extends BaseComponent {
     }
 
     const maxLength = Number.parseInt(this._input.getAttribute('maxlength') ?? '', 10)
-    return Number.isNaN(maxLength) || maxLength < 1 ? 6 : maxLength
+    if (!Number.isNaN(maxLength) && maxLength > 0) {
+      return maxLength
+    }
+
+    const { groups } = this._config
+    if (groups && groups.length > 0) {
+      return groups.reduce((sum, group) => sum + group, 0)
+    }
+
+    return 6
   }
 
   _setupInput(): void {

core/js/tests/unit/otp-input.spec.ts

@@ -75,6 +75,20 @@ describe('OtpInput', () => {
       expect(input().getAttribute('maxlength')).toBe('8')
     })
 
+    it('should default the length to the sum of groups when length is not set', () => {
+      otp().setAttribute('data-bs-groups', '[4,4]')
+      new OtpInput(otp())
+      expect(slots()).toHaveLength(8)
+      expect(input().getAttribute('maxlength')).toBe('8')
+    })
+
+    it('should let the native maxlength override the sum of groups', () => {
+      input().setAttribute('maxlength', '6')
+      otp().setAttribute('data-bs-groups', '[3]')
+      new OtpInput(otp())
+      expect(slots()).toHaveLength(6)
+    })
+
     it('should set inputmode and pattern from the type option', () => {
       otp().setAttribute('data-bs-type', 'alphanumeric')
       new OtpInput(otp())