Skip to content

WEBDEV-8711 add type check and value conversion at the top of the function #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dualcnhq wants to merge 1 commit into
base: main
Choose a base branch
from
+17 −0
Open

WEBDEV-8711 add type check and value conversion at the top of the function #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions src/elements/ia-otp-input/ia-otp-input.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -575,6 +575,21 @@ describe('IA OTP Input', () => {
expect(inputs?.[5].value).to.equal('');
});

test('does not throw if prefill value property is set to a non-string value', async () => {

@jbuckner jbuckner Aug 10, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This covers the one path that never crashed. The reported error is handleInput reading e.data off beforeinput, not prefillValue. If we're hardening against a non-string reaching fillInputs, worth firing a beforeinput with a non-string data too:

const ev = new InputEvent('beforeinput', { bubbles: true });
Object.defineProperty(ev, 'data', { value: {} });
inputs?.[0].dispatchEvent(ev);

const el = await fixture<IAOTPInput>(html`<ia-otp-input></ia-otp-input>`);
const inputs = el.shadowRoot?.querySelectorAll('input');

el.prefillValue = 23456 as unknown as string;
await el.updateComplete;

expect(inputs?.[0].value).to.equal('2');
expect(inputs?.[1].value).to.equal('3');
expect(inputs?.[2].value).to.equal('4');
expect(inputs?.[3].value).to.equal('5');
expect(inputs?.[4].value).to.equal('6');
expect(inputs?.[5].value).to.equal('');
});

test('returns focus to first character if inputs cleared', async () => {
const el = await fixture<IAOTPInput>(html`<ia-otp-input></ia-otp-input>`);
const inputs = el.shadowRoot?.querySelectorAll('input');
Expand Down
2 changes: 2 additions & 0 deletions src/elements/ia-otp-input/ia-otp-input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,8 @@ export class IAOTPInput extends LitElement {
* Submits the result if enough characters are filled.
*/
private fillInputs(value: string) {
if (typeof value !== 'string') value = String(value ?? '');

@jbuckner jbuckner Aug 10, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This coerces anything, not just numbers. numericOnly defaults to true so the regex drops the garbage and we're fine in practice, but at numericOnly=false an object prefill becomes "[object Object]" and fills the boxes with objectO. Bailing reads safer than coercing for anything that isn't a string or a number:

if (typeof value === 'number') value = String(value);
if (typeof value !== 'string') return;

Also String(value ?? '') turns a null prefill into '', which then falls into clearInputs(). Probably what you want, just flagging it's a behavior change.

Q: was the number case the actual intent here, or just the easiest thing to test?


if (value === '') this.clearInputs();

const charsToFill = value
Expand Down
Loading