ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(form-core): do not preprocess during composition

Browse source
This commit is contained in:
Thijs Louisse 2021-03-31 19:47:56 +02:00
parent 3c57fc3062
commit 3b5ed3222f
4 changed files with 394 additions and 323 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.changeset/curly-lamps-cheer.md Normal file
View file

@ -0,0 +1,7 @@
---
'@lion/form-core': patch
---
### Bug fixes
fix(form-core): do not preprocess during composition

34
packages/form-core/src/FormatMixin.js
View file

@ -233,13 +233,6 @@ const FormatMixinImplementation = superclass =>
this.__preventRecursiveTrigger = false;
}
/**
* @param {string} value
*/
__callPreprocessor(value) {
return this.preprocessor(value);
}
/**
* @param {string|undefined} value
* @return {?}
@ -348,7 +341,9 @@ const FormatMixinImplementation = superclass =>
* to the parsing/formatting/serializing loop.
*/
_syncValueUpwards() {
this.value = this.__callPreprocessor(this.value);
if (!this.__isHandlingComposition) {
this.value = this.preprocessor(this.value);
}
this.modelValue = this.__callParser(this.value);
}
@ -366,6 +361,10 @@ const FormatMixinImplementation = superclass =>
}
/**
* Every time .formattedValue is attempted to sync to the view value (on change/blur and on
* modelValue change), this condition is checked. When enhancing it, it's recommended to
* call `super._reflectBackOn()`
* @overridable
* @return {boolean}
*/
_reflectBackOn() {
@ -393,10 +392,25 @@ const FormatMixinImplementation = superclass =>
this.__isHandlingUserInput = false;
}
/**
* @param {Event} event
*/
__onCompositionEvent({ type }) {
if (type === 'compositionstart') {
this.__isHandlingComposition = true;
} else if (type === 'compositionend') {
this.__isHandlingComposition = false;
// in all other cases this would be triggered via user-input-changed
this._syncValueUpwards();
}
}
constructor() {
super();
this.formatOn = 'change';
this.formatOptions = /** @type {FormatOptions} */ ({});
this.__onCompositionEvent = this.__onCompositionEvent.bind(this);
}
connectedCallback() {
@ -422,6 +436,8 @@ const FormatMixinImplementation = superclass =>
if (this._inputNode) {
this._inputNode.addEventListener(this.formatOn, this._reflectBackFormattedValueDebounced);
this._inputNode.addEventListener('input', this._proxyInputEvent);
this._inputNode.addEventListener('compositionstart', this.__onCompositionEvent);
this._inputNode.addEventListener('compositionend', this.__onCompositionEvent);
}
}
@ -435,6 +451,8 @@ const FormatMixinImplementation = superclass =>
/** @type {EventListenerOrEventListenerObject} */ (this
._reflectBackFormattedValueDebounced),
);
this._inputNode.removeEventListener('compositionstart', this.__onCompositionEvent);
this._inputNode.removeEventListener('compositionend', this.__onCompositionEvent);
}
}
};

487
packages/form-core/test-suites/FormatMixin.suite.js
View file

@ -35,10 +35,17 @@ class FormatClass extends FormatMixin(LitElement) {
/**
* @param {FormatClass} formControl
* @param {?} newViewValue
* @param {{caretIndex?:number}} config
*/
function mimicUserInput(formControl, newViewValue) {
function mimicUserInput(formControl, newViewValue, { caretIndex } = {}) {
formControl.value = newViewValue; // eslint-disable-line no-param-reassign
formControl._inputNode.dispatchEvent(new CustomEvent('input', { bubbles: true }));
if (caretIndex) {
// eslint-disable-next-line no-param-reassign
formControl._inputNode.selectionStart = caretIndex;
// eslint-disable-next-line no-param-reassign
formControl._inputNode.selectionEnd = caretIndex;
}
formControl._inputNode.dispatchEvent(new Event('input', { bubbles: true }));
}
/**
@ -87,7 +94,7 @@ export function runFormatMixinSuite(customConfig) {
describe('FormatMixin', async () => {
/** @type {{d: any}} */
let elem;
let tag;
/** @type {FormatClass} */
let nonFormat;
/** @type {FormatClass} */
@ -97,34 +104,74 @@ export function runFormatMixinSuite(customConfig) {
if (!cfg.tagString) {
cfg.tagString = defineCE(FormatClass);
}
elem = unsafeStatic(cfg.tagString);
tag = unsafeStatic(cfg.tagString);
nonFormat = await fixture(html`
<${elem}
<${tag}
.formatter="${/** @param {?} v */ v => v}"
.parser="${/** @param {string} v */ v => v}"
.serializer="${/** @param {?} v */ v => v}"
.deserializer="${/** @param {string} v */ v => v}"
>
<input slot="input">
</${elem}>
</${tag}>
`);
fooFormat = await fixture(html`
<${elem}
<${tag}
.formatter="${/** @param {string} value */ value => `foo: ${value}`}"
.parser="${/** @param {string} value */ value => value.replace('foo: ', '')}"
.serializer="${/** @param {string} value */ value => `[foo] ${value}`}"
.deserializer="${/** @param {string} value */ value => value.replace('[foo] ', '')}"
>
<input slot="input">
</${elem}>
</${tag}>
`);
});
it('fires `model-value-changed` for every input triggered by user', async () => {
it('has modelValue, formattedValue and serializedValue which are computed synchronously', async () => {
expect(nonFormat.modelValue).to.equal('', 'modelValue initially');
expect(nonFormat.formattedValue).to.equal('', 'formattedValue initially');
expect(nonFormat.serializedValue).to.equal('', 'serializedValue initially');
const generatedValue = generateValueBasedOnType();
nonFormat.modelValue = generatedValue;
expect(nonFormat.modelValue).to.equal(generatedValue, 'modelValue as provided');
expect(nonFormat.formattedValue).to.equal(generatedValue, 'formattedValue synchronized');
expect(nonFormat.serializedValue).to.equal(generatedValue, 'serializedValue synchronized');
});
/**
* Reminder: modelValue is the SSOT all other values are derived from
* (and should be translated to)
*/
describe('ModelValue', () => {
it('fires `model-value-changed` for every programmatic modelValue change', async () => {
const el = /** @type {FormatClass} */ (await fixture(
html`<${tag}><input slot="input"></${tag}>`,
));
let counter = 0;
let isTriggeredByUser = false;
el.addEventListener('model-value-changed', event => {
counter += 1;
isTriggeredByUser = /** @type {CustomEvent} */ (event).detail.isTriggeredByUser;
});
el.modelValue = 'one';
expect(counter).to.equal(1);
expect(isTriggeredByUser).to.be.false;
// no change means no event
el.modelValue = 'one';
expect(counter).to.equal(1);
el.modelValue = 'two';
expect(counter).to.equal(2);
});
it('fires `model-value-changed` for every user input, adding `isTriggeredByUser` in event detail', async () => {
const formatEl = /** @type {FormatClass} */ (await fixture(
html`<${elem}><input slot="input"></${elem}>`,
html`<${tag}><input slot="input"></${tag}>`,
));
let counter = 0;
@ -154,41 +201,88 @@ export function runFormatMixinSuite(customConfig) {
expect(counter).to.equal(2 + counterOffset);
});
it('fires `model-value-changed` for every programmatic modelValue change', async () => {
const el = /** @type {FormatClass} */ (await fixture(
html`<${elem}><input slot="input"></${elem}>`,
));
let counter = 0;
let isTriggeredByUser = false;
it('synchronizes _inputNode.value as a fallback mechanism on init (when no modelValue provided)', async () => {
// Note that in lion-field, the attribute would be put on <lion-field>, not on <input>
const formatElem = /** @type {FormatClass} */ (await fixture(html`
<${tag}
value="string"
.formatter=${/** @param {string} value */ value => `foo: ${value}`}
.parser=${/** @param {string} value */ value => value.replace('foo: ', '')}
.serializer=${/** @param {string} value */ value => `[foo] ${value}`}
.deserializer=${/** @param {string} value */ value => value.replace('[foo] ', '')}
>
<input slot="input" value="string" />
</${tag}>
`));
// Now check if the format/parse/serialize loop has been triggered
await formatElem.updateComplete;
expect(formatElem.formattedValue).to.equal('foo: string');
el.addEventListener('model-value-changed', event => {
counter += 1;
isTriggeredByUser = /** @type {CustomEvent} */ (event).detail.isTriggeredByUser;
expect(formatElem._inputNode.value).to.equal('foo: string');
expect(formatElem.serializedValue).to.equal('[foo] string');
expect(formatElem.modelValue).to.equal('string');
});
el.modelValue = 'one';
expect(counter).to.equal(1);
expect(isTriggeredByUser).to.be.false;
// no change means no event
el.modelValue = 'one';
expect(counter).to.equal(1);
el.modelValue = 'two';
expect(counter).to.equal(2);
describe('Unparseable values', () => {
it('converts to Unparseable when wrong value inputted by user', async () => {
const el = /** @type {FormatClass} */ (await fixture(html`
<${tag} .parser=${
/** @param {string} viewValue */ viewValue => Number(viewValue) || undefined
}
>
<input slot="input">
</${tag}>
`));
mimicUserInput(el, 'test');
expect(el.modelValue).to.be.an.instanceof(Unparseable);
});
it('has modelValue, formattedValue and serializedValue which are computed synchronously', async () => {
expect(nonFormat.modelValue).to.equal('', 'modelValue initially');
expect(nonFormat.formattedValue).to.equal('', 'formattedValue initially');
expect(nonFormat.serializedValue).to.equal('', 'serializedValue initially');
const generatedValue = generateValueBasedOnType();
nonFormat.modelValue = generatedValue;
expect(nonFormat.modelValue).to.equal(generatedValue, 'modelValue as provided');
expect(nonFormat.formattedValue).to.equal(generatedValue, 'formattedValue synchronized');
expect(nonFormat.serializedValue).to.equal(generatedValue, 'serializedValue synchronized');
it('preserves the viewValue when unparseable', async () => {
const el = /** @type {FormatClass} */ (await fixture(html`
<${tag}
.parser=${
/** @param {string} viewValue */ viewValue => Number(viewValue) || undefined
}
>
<input slot="input">
</${tag}>
`));
mimicUserInput(el, 'test');
expect(el.formattedValue).to.equal('test');
expect(el.value).to.equal('test');
});
it('displays the viewValue when modelValue is of type Unparseable', async () => {
const el = /** @type {FormatClass} */ (await fixture(html`
<${tag}
.parser=${
/** @param {string} viewValue */ viewValue => Number(viewValue) || undefined
}
>
<input slot="input">
</${tag}>
`));
el.modelValue = new Unparseable('foo');
expect(el.value).to.equal('foo');
});
it('empty strings are not Unparseable', async () => {
const el = /** @type {FormatClass} */ (await fixture(html`
<${tag}>
<input slot="input" value="string">
</${tag}>
`));
// This could happen when the user erases the input value
mimicUserInput(el, '');
// For backwards compatibility, we keep the modelValue an empty string here.
// Undefined would be more appropriate 'conceptually', however
expect(el.modelValue).to.equal('');
});
});
});
describe('View value', () => {
it('has an input node (like <input>/<textarea>) which holds the formatted (view) value', async () => {
fooFormat.modelValue = 'string';
expect(fooFormat.formattedValue).to.equal('foo: string');
@ -196,6 +290,81 @@ export function runFormatMixinSuite(customConfig) {
expect(fooFormat._inputNode.value).to.equal('foo: string');
});
it('works if there is no underlying _inputNode', async () => {
const tagNoInputString = defineCE(class extends FormatMixin(LitElement) {});
const tagNoInput = unsafeStatic(tagNoInputString);
expect(async () => {
/** @type {FormatClass} */ (await fixture(html`<${tagNoInput}></${tagNoInput}>`));
}).to.not.throw();
});
describe('Presenting value to end user', () => {
it('reflects back formatted value to user on leave', async () => {
const formatEl = /** @type {FormatClass} */ (await fixture(html`
<${tag} .formatter="${/** @param {string} value */ value => `foo: ${value}`}">
<input slot="input" />
</${tag}>
`));
const generatedViewValue = generateValueBasedOnType({ viewValue: true });
const generatedModelValue = generateValueBasedOnType();
mimicUserInput(formatEl, generatedViewValue);
expect(formatEl._inputNode.value).to.not.equal(`foo: ${generatedModelValue}`);
// user leaves field
formatEl._inputNode.dispatchEvent(new CustomEvent(formatEl.formatOn, { bubbles: true }));
await aTimeout(0);
expect(formatEl._inputNode.value).to.equal(`foo: ${generatedModelValue}`);
});
it('reflects back .formattedValue immediately when .modelValue changed imperatively', async () => {
const el = /** @type {FormatClass} */ (await fixture(html`
<${tag} .formatter="${/** @param {string} value */ value => `foo: ${value}`}">
<input slot="input" />
</${tag}>
`));
// The FormatMixin can be used in conjunction with the ValidateMixin, in which case
// it can hold errorState (affecting the formatting)
el.hasFeedbackFor = ['error'];
// users types value 'test'
mimicUserInput(el, 'test');
expect(el._inputNode.value).to.not.equal('foo: test');
// Now see the difference for an imperative change
el.modelValue = 'test2';
expect(el._inputNode.value).to.equal('foo: test2');
});
});
});
describe('Parser / formatter / serializer / preprocessor', () => {
it('calls the parser|formatter|serializer|preprocessor provided by user', async () => {
const formatterSpy = sinon.spy(value => `foo: ${value}`);
const parserSpy = sinon.spy(value => value.replace('foo: ', ''));
const serializerSpy = sinon.spy(value => `[foo] ${value}`);
const preprocessorSpy = sinon.spy(value => value.replace('bar', ''));
const el = /** @type {FormatClass} */ (await fixture(html`
<${tag}
.formatter=${formatterSpy}
.parser=${parserSpy}
.serializer=${serializerSpy}
.preprocessor=${preprocessorSpy}
.modelValue=${'test'}
>
<input slot="input">
</${tag}>
`));
expect(formatterSpy.called).to.be.true;
expect(serializerSpy.called).to.be.true;
el.formattedValue = 'raw';
expect(parserSpy.called).to.be.true;
el.dispatchEvent(new CustomEvent('user-input-changed'));
expect(preprocessorSpy.called).to.be.true;
});
describe('Value conversions', () => {
it('converts modelValue => formattedValue (via this.formatter)', async () => {
fooFormat.modelValue = 'string';
expect(fooFormat.formattedValue).to.equal('foo: string');
@ -216,153 +385,10 @@ export function runFormatMixinSuite(customConfig) {
fooFormat.serializedValue = '[foo] string';
expect(fooFormat.modelValue).to.equal('string');
});
it('synchronizes _inputNode.value as a fallback mechanism', async () => {
// Note that in lion-field, the attribute would be put on <lion-field>, not on <input>
const formatElem = /** @type {FormatClass} */ (await fixture(html`
<${elem}
value="string"
.formatter=${/** @param {string} value */ value => `foo: ${value}`}
.parser=${/** @param {string} value */ value => value.replace('foo: ', '')}
.serializer=${/** @param {string} value */ value => `[foo] ${value}`}
.deserializer=${/** @param {string} value */ value => value.replace('[foo] ', '')}
>
<input slot="input" value="string" />
</${elem}>
`));
// Now check if the format/parse/serialize loop has been triggered
await formatElem.updateComplete;
expect(formatElem.formattedValue).to.equal('foo: string');
expect(formatElem._inputNode.value).to.equal('foo: string');
expect(formatElem.serializedValue).to.equal('[foo] string');
expect(formatElem.modelValue).to.equal('string');
});
it('reflects back formatted value to user on leave', async () => {
const formatEl = /** @type {FormatClass} */ (await fixture(html`
<${elem} .formatter="${/** @param {string} value */ value => `foo: ${value}`}">
<input slot="input" />
</${elem}>
`));
const generatedViewValue = generateValueBasedOnType({ viewValue: true });
const generatedModelValue = generateValueBasedOnType();
mimicUserInput(formatEl, generatedViewValue);
expect(formatEl._inputNode.value).to.not.equal(`foo: ${generatedModelValue}`);
// user leaves field
formatEl._inputNode.dispatchEvent(new CustomEvent(formatEl.formatOn, { bubbles: true }));
await aTimeout(0);
expect(formatEl._inputNode.value).to.equal(`foo: ${generatedModelValue}`);
});
it('reflects back .formattedValue immediately when .modelValue changed imperatively', async () => {
const el = /** @type {FormatClass} */ (await fixture(html`
<${elem} .formatter="${/** @param {string} value */ value => `foo: ${value}`}">
<input slot="input" />
</${elem}>
`));
// The FormatMixin can be used in conjunction with the ValidateMixin, in which case
// it can hold errorState (affecting the formatting)
el.hasFeedbackFor = ['error'];
// users types value 'test'
mimicUserInput(el, 'test');
expect(el._inputNode.value).to.not.equal('foo: test');
// Now see the difference for an imperative change
el.modelValue = 'test2';
expect(el._inputNode.value).to.equal('foo: test2');
});
it('works if there is no underlying _inputNode', async () => {
const tagNoInputString = defineCE(class extends FormatMixin(LitElement) {});
const tagNoInput = unsafeStatic(tagNoInputString);
expect(async () => {
/** @type {FormatClass} */ (await fixture(html`<${tagNoInput}></${tagNoInput}>`));
}).to.not.throw();
});
describe('parsers/formatters/serializers/preprocessors', () => {
it('should call the parser|formatter|serializer|preprocessor provided by user', async () => {
const formatterSpy = sinon.spy(value => `foo: ${value}`);
const parserSpy = sinon.spy(value => value.replace('foo: ', ''));
const serializerSpy = sinon.spy(value => `[foo] ${value}`);
const preprocessorSpy = sinon.spy(value => value.replace('bar', ''));
const el = /** @type {FormatClass} */ (await fixture(html`
<${elem}
.formatter=${formatterSpy}
.parser=${parserSpy}
.serializer=${serializerSpy}
.preprocessor=${preprocessorSpy}
.modelValue=${'test'}
>
<input slot="input">
</${elem}>
`));
expect(formatterSpy.called).to.equal(true);
expect(serializerSpy.called).to.equal(true);
el.formattedValue = 'raw';
expect(parserSpy.called).to.equal(true);
el.dispatchEvent(new CustomEvent('user-input-changed'));
expect(preprocessorSpy.called).to.equal(true);
});
it('should have formatOptions available in formatter', async () => {
const formatterSpy = sinon.spy(value => `foo: ${value}`);
const generatedViewValue = /** @type {string} */ (generateValueBasedOnType({
viewValue: true,
}));
await fixture(html`
<${elem} value="${generatedViewValue}" .formatter="${formatterSpy}"
.formatOptions="${{ locale: 'en-GB', decimalSeparator: '-' }}">
<input slot="input" .value="${generatedViewValue}">
</${elem}>
`);
/** @type {{locale: string, decimalSeparator: string}[]} */
const spyItem = formatterSpy.args[0];
const spyArg = spyItem[1];
expect(spyArg.locale).to.equal('en-GB');
expect(spyArg.decimalSeparator).to.equal('-');
});
it('will only call the parser for defined values', async () => {
/** @type {?} */
const generatedValue = generateValueBasedOnType();
const parserSpy = sinon.spy();
const el = /** @type {FormatClass} */ (await fixture(html`
<${elem} .parser="${parserSpy}">
<input slot="input" .value="${generatedValue}">
</${elem}>
`));
expect(parserSpy.callCount).to.equal(1);
// This could happen for instance in a reset
el.modelValue = undefined;
expect(parserSpy.callCount).to.equal(1);
// This could happen when the user erases the input value
mimicUserInput(el, '');
expect(parserSpy.callCount).to.equal(1);
});
it('will not return Unparseable when empty strings are inputted', async () => {
const el = /** @type {FormatClass} */ (await fixture(html`
<${elem}>
<input slot="input" value="string">
</${elem}>
`));
// This could happen when the user erases the input value
mimicUserInput(el, '');
// For backwards compatibility, we keep the modelValue an empty string here.
// Undefined would be more appropriate 'conceptually', however
expect(el.modelValue).to.equal('');
});
it('will only call the formatter for valid values on `user-input-changed` ', async () => {
describe('Formatter', () => {
it('only calls the formatter for valid values on `user-input-changed` ', async () => {
const formatterSpy = sinon.spy(value => `foo: ${value}`);
const generatedModelValue = generateValueBasedOnType();
@ -375,9 +401,9 @@ export function runFormatMixinSuite(customConfig) {
});
const el = /** @type {FormatClass} */ (await fixture(html`
<${elem} .formatter=${formatterSpy}>
<${tag} .formatter=${formatterSpy}>
<input slot="input" .value="${generatedViewValue}">
</${elem}>
</${tag}>
`));
expect(formatterSpy.callCount).to.equal(1);
@ -411,6 +437,48 @@ export function runFormatMixinSuite(customConfig) {
expect(el.formattedValue).to.equal(`foo: ${generatedModelValue}`);
});
it('has formatOptions available in formatter', async () => {
const formatterSpy = sinon.spy(value => `foo: ${value}`);
const generatedViewValue = /** @type {string} */ (generateValueBasedOnType({
viewValue: true,
}));
await fixture(html`
<${tag} value="${generatedViewValue}" .formatter="${formatterSpy}"
.formatOptions="${{ locale: 'en-GB', decimalSeparator: '-' }}">
<input slot="input" .value="${generatedViewValue}">
</${tag}>
`);
/** @type {{locale: string, decimalSeparator: string}[]} */
const spyItem = formatterSpy.args[0];
const spyArg = spyItem[1];
expect(spyArg.locale).to.equal('en-GB');
expect(spyArg.decimalSeparator).to.equal('-');
});
});
describe('Parser', () => {
it('only calls the parser for defined values', async () => {
/** @type {?} */
const generatedValue = generateValueBasedOnType();
const parserSpy = sinon.spy();
const el = /** @type {FormatClass} */ (await fixture(html`
<${tag} .parser="${parserSpy}">
<input slot="input" .value="${generatedValue}">
</${tag}>
`));
expect(parserSpy.callCount).to.equal(1);
// This could happen for instance in a reset
el.modelValue = undefined;
expect(parserSpy.callCount).to.equal(1);
// This could happen when the user erases the input value
mimicUserInput(el, '');
expect(parserSpy.callCount).to.equal(1);
});
});
describe('Preprocessor', () => {
it('changes `.value` on keyup, before passing on to parser', async () => {
const val = generateValueBasedOnType({ viewValue: true }) || 'init-value';
if (typeof val !== 'string') {
@ -421,9 +489,9 @@ export function runFormatMixinSuite(customConfig) {
const preprocessorSpy = sinon.spy(v => v.replace(/\$$/g, ''));
const el = /** @type {FormatClass} */ (await fixture(html`
<${elem} .preprocessor=${preprocessorSpy}>
<${tag} .preprocessor=${preprocessorSpy}>
<input slot="input">
</${elem}>
</${tag}>
`));
expect(preprocessorSpy.callCount).to.equal(1);
@ -435,45 +503,22 @@ export function runFormatMixinSuite(customConfig) {
expect(parserSpy.lastCall.args[0]).to.equal(val);
expect(el._inputNode.value).to.equal(val);
});
});
describe('Unparseable values', () => {
it('should convert to Unparseable when wrong value inputted by user', async () => {
it('does not preprocess during composition', async () => {
const el = /** @type {FormatClass} */ (await fixture(html`
<${elem} .parser=${
/** @param {string} viewValue */ viewValue => Number(viewValue) || undefined
}
>
<${tag} .preprocessor=${(/** @type {string} */ v) => v.replace(/\$$/g, '')}>
<input slot="input">
</${elem}>
</${tag}>
`));
mimicUserInput(el, 'test');
expect(el.modelValue).to.be.an.instanceof(Unparseable);
const preprocessorSpy = sinon.spy(el, 'preprocessor');
el._inputNode.dispatchEvent(new Event('compositionstart', { bubbles: true }));
mimicUserInput(el, '`');
expect(preprocessorSpy.callCount).to.equal(0);
// "à" would be sent by the browser after pressing "option + `", followed by "a"
mimicUserInput(el, 'à');
el._inputNode.dispatchEvent(new Event('compositionend', { bubbles: true }));
expect(preprocessorSpy.callCount).to.equal(1);
});
it('should preserve the viewValue when not parseable', async () => {
const el = /** @type {FormatClass} */ (await fixture(html`
<${elem}
.parser=${/** @param {string} viewValue */ viewValue => Number(viewValue) || undefined}
>
<input slot="input">
</${elem}>
`));
mimicUserInput(el, 'test');
expect(el.formattedValue).to.equal('test');
expect(el.value).to.equal('test');
});
it('should display the viewValue when modelValue is of type Unparseable', async () => {
const el = /** @type {FormatClass} */ (await fixture(html`
<${elem}
.parser=${/** @param {string} viewValue */ viewValue => Number(viewValue) || undefined}
>
<input slot="input">
</${elem}>
`));
el.modelValue = new Unparseable('foo');
expect(el.value).to.equal('foo');
});
});
});

1
packages/form-core/types/FormatMixinTypes.d.ts vendored
View file

@ -16,6 +16,7 @@ export declare class FormatHost {
formatter(v: unknown, opts: FormatNumberOptions): string;
serializer(v: unknown): string;
deserializer(v: string): unknown;
preprocessor(v: string): string;
get value(): string;
set value(value: string);