[time-picker] Do not support steps that are not supported by the custom formatter

[vursen]

Description

There is a workaround in time-picker to support keyboard stepping even when step is smaller than what the custom formatter can display. For example, step is configured to 20 seconds while the custom formatter only displays hours and minutes. The way it currently works is that the value updates with every ArrowDown and ArrowDown, while the input element's value only changes when the custom formatter returns a different string.

Related code fragment:

web-components/packages/time-picker/src/vaadin-time-picker.js

Lines 462 to 474 in 64de04f

	__onArrowPressWithStep(step) {
	const objWithStep = this.__addStep(this.__getMsec(this.__memoValue), step, true);
	this.__memoValue = objWithStep;
	// Setting `value` property triggers the synchronous observer
	// that in turn updates `_comboBoxValue` (actual input value)
	// with its own observer where the value can be parsed again,
	// so we set this flag to ensure it does not alter the value.
	this.__useMemo = true;
	this.value = this.__formatISO(objWithStep);
	this.__useMemo = false;
	this.__dispatchChange();

Related test:

web-components/packages/time-picker/test/keyboard-navigation.test.js

Lines 134 to 143 in de5f989

	it('should correctly subtract the step with custom parser and formatter', () => {
	timePicker.value = '12:0';
	timePicker.step = 20;
	for (let inc = 1; inc < 4; inc++) {
	arrowDown(inputElement);
	expect(inputElement.value).to.be.equal('11.59');
	}
	arrowDown(inputElement);
	expect(inputElement.value).to.be.equal('11.58');
	});

Expected outcome

I believe that the mentioned case is rather an incorrect usage of the component and should not be supported.

Minimal reproducible example

<script type="module">
  import '@vaadin/time-picker';
  const field = document.querySelector('vaadin-time-picker');
  field.i18n.parseTime = (text) => {
    const parts = text.split('.');
    return {
      hours: parts[0],
      minutes: parts[1],
    };
  };
  field.i18n.formatTime = (time) => {
    return `${time.hours}.${time.minutes}`;
  };
</script>
<vaadin-time-picker step="20"></vaadin-time-picker>

Steps to reproduce

1. Focus the field
2. Press ArrowDown or ArrowUp

Environment

Vaadin version(s): 24.2 and earlier
OS: Mac OS

Browsers

No response