Skip to content

Commit 618575d

Browse files
committed
fix(input-otp): warn for incorrectly formatted separator strings
1 parent a9a31ab commit 618575d

File tree

2 files changed

+55
-25
lines changed

2 files changed

+55
-25
lines changed

core/src/components/input-otp/input-otp.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,18 @@ export class InputOTP implements ComponentInterface {
179179
return;
180180
}
181181

182+
if (typeof separators === 'string' && separators !== 'all') {
183+
const isValidFormat = /^(\d+)(,\d+)*$/.test(separators);
184+
if (!isValidFormat) {
185+
printIonWarning(
186+
`[ion-input-otp] - Invalid separators format. Expected a comma-separated list of numbers, an array of numbers, or "all". Received: ${separators}`,
187+
this.el
188+
);
189+
this.parsedSeparators = [];
190+
return;
191+
}
192+
}
193+
182194
let separatorValues: number[];
183195
if (separators === 'all') {
184196
separatorValues = Array.from({ length: length - 1 }, (_, i) => i + 1);

core/src/components/input-otp/test/separators/input-otp.e2e.ts

Lines changed: 43 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
4848
* Functionality is the same across modes and directions
4949
*/
5050
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
51-
test.describe.only(title('input-otp: separators functionality'), () => {
51+
test.describe(title('input-otp: separators functionality'), () => {
5252
test('should render separators after the first and third input box', async ({ page }) => {
53-
await page.setContent(
54-
`
55-
<ion-input-otp separators="1,3">Description</ion-input-otp>
56-
`,
57-
config
58-
);
53+
await page.setContent(`<ion-input-otp separators="1,3">Description</ion-input-otp>`, config);
5954

6055
const firstSeparator = page.locator('ion-input-otp .native-wrapper:nth-child(1) .input-otp-separator');
6156
await expect(firstSeparator).toHaveCount(1);
@@ -68,12 +63,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
6863
});
6964

7065
test('should render separators after the second and third input box', async ({ page }) => {
71-
await page.setContent(
72-
`
73-
<ion-input-otp>Description</ion-input-otp>
74-
`,
75-
config
76-
);
66+
await page.setContent(`<ion-input-otp>Description</ion-input-otp>`, config);
7767

7868
const inputOtp = page.locator('ion-input-otp');
7969
await inputOtp.evaluate((el: HTMLIonInputOtpElement) => {
@@ -91,12 +81,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
9181
});
9282

9383
test('should render all separators', async ({ page }) => {
94-
await page.setContent(
95-
`
96-
<ion-input-otp separators="all">Description</ion-input-otp>
97-
`,
98-
config
99-
);
84+
await page.setContent(`<ion-input-otp separators="all">Description</ion-input-otp>`, config);
10085

10186
const firstSeparator = page.locator('ion-input-otp .native-wrapper:nth-child(1) .input-otp-separator');
10287
await expect(firstSeparator).toHaveCount(1);
@@ -117,17 +102,50 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
117102
}
118103
});
119104

120-
await page.setContent(
121-
`
122-
<ion-input-otp separators="1,3,5,6,7">Description</ion-input-otp>
123-
`,
124-
config
125-
);
105+
await page.setContent(`<ion-input-otp separators="1,3,5,6,7">Description</ion-input-otp>`, config);
126106

127107
expect(warnings.length).toBe(1);
128108
expect(warnings[0]).toContain(
129109
'[Ionic Warning]: [ion-input-otp] - The following separator positions are greater than the input length (4): 5, 6, 7. These separators will be ignored.'
130110
);
131111
});
112+
113+
test('should warn when setting separators to an invalid space-separated string', async ({ page }) => {
114+
const warnings: string[] = [];
115+
116+
page.on('console', (ev) => {
117+
if (ev.type() === 'warning') {
118+
warnings.push(ev.text());
119+
}
120+
});
121+
122+
const invalidSeparators = '1 2 3';
123+
124+
await page.setContent(`<ion-input-otp separators="${invalidSeparators}">Description</ion-input-otp>`, config);
125+
126+
expect(warnings.length).toBe(1);
127+
expect(warnings[0]).toContain(
128+
`[Ionic Warning]: [ion-input-otp] - Invalid separators format. Expected a comma-separated list of numbers, an array of numbers, or "all". Received: ${invalidSeparators}`
129+
);
130+
});
131+
132+
test('should warn when setting separators to an invalid comma-separated string', async ({ page }) => {
133+
const warnings: string[] = [];
134+
135+
page.on('console', (ev) => {
136+
if (ev.type() === 'warning') {
137+
warnings.push(ev.text());
138+
}
139+
});
140+
141+
const invalidSeparators = '1,d,3';
142+
143+
await page.setContent(`<ion-input-otp separators="${invalidSeparators}">Description</ion-input-otp>`, config);
144+
145+
expect(warnings.length).toBe(1);
146+
expect(warnings[0]).toContain(
147+
`[Ionic Warning]: [ion-input-otp] - Invalid separators format. Expected a comma-separated list of numbers, an array of numbers, or "all". Received: ${invalidSeparators}`
148+
);
149+
});
132150
});
133151
});

0 commit comments

Comments
 (0)