Skip to content

Commit

Permalink
fix(number-field): update display value on scroll and arrow up/down
Browse files Browse the repository at this point in the history
  • Loading branch information
@imizga @Westbrook
imizga authored and Westbrook committed Nov 7, 2023
1 parent e236a50 commit fc59a18
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 1 deletion.
5 changes: 4 additions & 1 deletion packages/number-field/src/NumberField.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -319,8 +319,11 @@ export class NumberField extends TextfieldBase {
if (isNaN(this.value)) {
value = min;
}

this._value = this.validateInput(value);
this.dispatchEvent(
this.inputElement.value = value.toString();

this.inputElement.dispatchEvent(
new Event('input', { bubbles: true, composed: true })
);
this.indeterminate = false;
Expand Down
40 changes: 40 additions & 0 deletions packages/number-field/test/number-field.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,12 @@ describe('NumberField', () => {
describe('receives input', () => {
it('without language context', async () => {
const el = await getElFrom(Default({ value: 1337 }));

el.size = 's';
expect(el.formattedValue).to.equal('1,337');
expect(el.valueAsString).to.equal('1337');
expect(el.value).to.equal(1337);
expect(el.focusElement.value).to.equal('1,337');
el.focus();
await sendKeys({ type: '7331' });
await elementUpdated(el);
Expand All @@ -85,6 +87,7 @@ describe('NumberField', () => {
expect(el.formattedValue).to.equal('13,377,331');
expect(el.valueAsString).to.equal('13377331');
expect(el.value).to.equal(13377331);
expect(el.focusElement.value).to.equal('13,377,331');
});
it('with language context', async () => {
const [languageContext] = createLanguageContext('fr');
Expand All @@ -93,10 +96,12 @@ describe('NumberField', () => {
${Default({ value: 1337 })}
</div>
`);

el.size = 'l';
expect(el.formattedValue).to.equal('1 337');
expect(el.valueAsString).to.equal('1337');
expect(el.value).to.equal(1337);
expect(el.focusElement.value).to.equal('1 337');
el.focus();
await sendKeys({ type: '7331' });
await elementUpdated(el);
Expand All @@ -105,6 +110,7 @@ describe('NumberField', () => {
expect(el.formattedValue).to.equal('13 377 331');
expect(el.valueAsString).to.equal('13377331');
expect(el.value).to.equal(13377331);
expect(el.focusElement.value).to.equal('13 377 331');
});
});
describe('Step', () => {
Expand All @@ -117,10 +123,12 @@ describe('NumberField', () => {
value: 5,
})
);

el.size = 'xl';
expect(el.value).to.equal(5);
expect(el.formattedValue).to.equal('5');
expect(el.valueAsString).to.equal('5');
expect(el.focusElement.value).to.equal('5');
});

it('supports both positive and negative decimal values', async () => {
Expand All @@ -132,34 +140,41 @@ describe('NumberField', () => {
value: -2.4,
})
);

el.size = 'xl';
expect(el.value).to.equal(-2.4);
expect(el.valueAsString).to.equal('-2.4');
expect(el.focusElement.value).to.equal('-2.4');
});
});
describe('Increments', () => {
let el: NumberField;

beforeEach(async () => {
el = await getElFrom(Default({}));
expect(el.value).to.be.NaN;
expect(el.formattedValue).to.equal('');
expect(el.valueAsString).to.equal('NaN');
expect(el.focusElement.value).to.equal('');
});
it('via pointer, only "left" button', async () => {
await clickBySelector(el, '.step-up', { button: 'middle' });
expect(el.formattedValue).to.equal('');
expect(el.valueAsString).to.equal('NaN');
expect(el.value).to.be.NaN;
expect(el.focusElement.value).to.equal('');
});
it('via pointer', async () => {
await clickBySelector(el, '.step-up');
expect(el.formattedValue).to.equal('0');
expect(el.valueAsString).to.equal('0');
expect(el.value).to.equal(0);
expect(el.focusElement.value).to.equal('0');
await clickBySelector(el, '.step-up');
expect(el.formattedValue).to.equal('1');
expect(el.valueAsString).to.equal('1');
expect(el.value).to.equal(1);
expect(el.focusElement.value).to.equal('1');
});
it('via arrow up', async () => {
el.focus();
Expand All @@ -169,11 +184,13 @@ describe('NumberField', () => {
expect(el.formattedValue).to.equal('0');
expect(el.valueAsString).to.equal('0');
expect(el.value).to.equal(0);
expect(el.focusElement.value).to.equal('0');
await sendKeys({ press: 'ArrowUp' });
await elementUpdated(el);
expect(el.formattedValue).to.equal('1');
expect(el.valueAsString).to.equal('1');
expect(el.value).to.equal(1);
expect(el.focusElement.value).to.equal('1');
});
it('via arrow up (shift modified)', async () => {
el.focus();
Expand All @@ -183,11 +200,13 @@ describe('NumberField', () => {
expect(el.formattedValue).to.equal('0');
expect(el.valueAsString).to.equal('0');
expect(el.value).to.equal(0);
expect(el.focusElement.value).to.equal('0');
await sendKeys({ press: 'Shift+ArrowUp' });
await elementUpdated(el);
expect(el.formattedValue).to.equal('10');
expect(el.valueAsString).to.equal('10');
expect(el.value).to.equal(10);
expect(el.focusElement.value).to.equal('10');
});
it('via arrow up (custom shift modified value)', async () => {
el.focus();
Expand All @@ -199,11 +218,13 @@ describe('NumberField', () => {
expect(el.formattedValue).to.equal('0');
expect(el.valueAsString).to.equal('0');
expect(el.value).to.equal(0);
expect(el.focusElement.value).to.equal('0');
await sendKeys({ press: 'Shift+ArrowUp' });
await elementUpdated(el);
expect(el.formattedValue).to.equal('15');
expect(el.valueAsString).to.equal('15');
expect(el.value).to.equal(15);
expect(el.focusElement.value).to.equal('15');
});
it('via scroll', async () => {
el.focus();
Expand All @@ -214,11 +235,13 @@ describe('NumberField', () => {
expect(el.formattedValue).to.equal('0');
expect(el.valueAsString).to.equal('0');
expect(el.value).to.equal(0);
expect(el.focusElement.value).to.equal('0');
el.dispatchEvent(new WheelEvent('wheel', { deltaY: 100 }));
await elementUpdated(el);
expect(el.formattedValue).to.equal('1');
expect(el.valueAsString).to.equal('1');
expect(el.value).to.equal(1);
expect(el.focusElement.value).to.equal('1');
});
it('via scroll (shift modified)', async () => {
el.focus();
Expand All @@ -234,6 +257,7 @@ describe('NumberField', () => {
expect(el.formattedValue).to.equal('0');
expect(el.valueAsString).to.equal('0');
expect(el.value).to.equal(0);
expect(el.focusElement.value).to.equal('0');
el.dispatchEvent(
new WheelEvent('wheel', {
deltaX: 100,
Expand All @@ -244,31 +268,37 @@ describe('NumberField', () => {
expect(el.formattedValue).to.equal('10');
expect(el.valueAsString).to.equal('10');
expect(el.value).to.equal(10);
expect(el.focusElement.value).to.equal('10');
});
});
describe('Decrements', () => {
let el: NumberField;

beforeEach(async () => {
el = await getElFrom(Default({}));
expect(el.value).to.be.NaN;
expect(el.formattedValue).to.equal('');
expect(el.valueAsString).to.equal('NaN');
expect(el.focusElement.value).to.equal('');
});
it('via pointer, only "left" button', async () => {
await clickBySelector(el, '.step-down', { button: 'middle' });
expect(el.formattedValue).to.equal('');
expect(el.valueAsString).to.equal('NaN');
expect(el.value).to.be.NaN;
expect(el.focusElement.value).to.equal('');
});
it('via pointer', async () => {
await clickBySelector(el, '.step-down');
expect(el.formattedValue).to.equal('0');
expect(el.valueAsString).to.equal('0');
expect(el.value).to.equal(0);
expect(el.focusElement.value).to.equal('0');
await clickBySelector(el, '.step-down');
expect(el.formattedValue).to.equal('-1');
expect(el.valueAsString).to.equal('-1');
expect(el.value).to.equal(-1);
expect(el.focusElement.value).to.equal('-1');
});
it('via arrow down', async () => {
el.focus();
Expand All @@ -278,11 +308,13 @@ describe('NumberField', () => {
expect(el.formattedValue).to.equal('0');
expect(el.valueAsString).to.equal('0');
expect(el.value).to.equal(0);
expect(el.focusElement.value).to.equal('0');
await sendKeys({ press: 'ArrowDown' });
await elementUpdated(el);
expect(el.formattedValue).to.equal('-1');
expect(el.valueAsString).to.equal('-1');
expect(el.value).to.equal(-1);
expect(el.focusElement.value).to.equal('-1');
});
it('via arrow down (shift modified)', async () => {
el.focus();
Expand All @@ -292,11 +324,13 @@ describe('NumberField', () => {
expect(el.formattedValue).to.equal('0');
expect(el.valueAsString).to.equal('0');
expect(el.value).to.equal(0);
expect(el.focusElement.value).to.equal('0');
await sendKeys({ press: 'Shift+ArrowDown' });
await elementUpdated(el);
expect(el.formattedValue).to.equal('-10');
expect(el.valueAsString).to.equal('-10');
expect(el.value).to.equal(-10);
expect(el.focusElement.value).to.equal('-10');
});
it('via arrow up (custom shift modified value)', async () => {
el.focus();
Expand All @@ -308,11 +342,13 @@ describe('NumberField', () => {
expect(el.formattedValue).to.equal('0');
expect(el.valueAsString).to.equal('0');
expect(el.value).to.equal(0);
expect(el.focusElement.value).to.equal('0');
await sendKeys({ press: 'Shift+ArrowDown' });
await elementUpdated(el);
expect(el.formattedValue).to.equal('-15');
expect(el.valueAsString).to.equal('-15');
expect(el.value).to.equal(-15);
expect(el.focusElement.value).to.equal('-15');
});
it('via scroll', async () => {
el.focus();
Expand All @@ -323,11 +359,13 @@ describe('NumberField', () => {
expect(el.formattedValue).to.equal('0');
expect(el.valueAsString).to.equal('0');
expect(el.value).to.equal(0);
expect(el.focusElement.value).to.equal('0');
el.dispatchEvent(new WheelEvent('wheel', { deltaY: -100 }));
await elementUpdated(el);
expect(el.formattedValue).to.equal('-1');
expect(el.valueAsString).to.equal('-1');
expect(el.value).to.equal(-1);
expect(el.focusElement.value).to.equal('-1');
});
it('via scroll (shift modified)', async () => {
el.focus();
Expand All @@ -343,6 +381,7 @@ describe('NumberField', () => {
expect(el.formattedValue).to.equal('0');
expect(el.valueAsString).to.equal('0');
expect(el.value).to.equal(0);
expect(el.focusElement.value).to.equal('0');
el.dispatchEvent(
new WheelEvent('wheel', {
deltaX: -100,
Expand All @@ -353,6 +392,7 @@ describe('NumberField', () => {
expect(el.formattedValue).to.equal('-10');
expect(el.valueAsString).to.equal('-10');
expect(el.value).to.equal(-10);
expect(el.focusElement.value).to.equal('-10');
});
});
describe('dispatched events', () => {
Expand Down

0 comments on commit fc59a18

Please sign in to comment.