Getting valueAsDate from input right after setting value

[davidkudera]

Describe the bug

The valueAsDate of sl-input[type=date] is null right after I set the value. This behavior is different from the native input element and is similar to this issue: #760

Example:

input.value = '2023-04-14'
console.log(input.valueAsDate);	// output: null

To Reproduce

Steps to reproduce the behavior:

1. Use sl-input[type=date]
2. Assign value
3. Observe valueAsDate

Browser / OS

• OS: Windows 11
• Browser: Chromium
• Browser version: 112

[claviska]

I was able to reproduce and fix this locally, but I wasn't able to repro it in the test runner, so I couldn't add a test. If anyone is interested in preventing a regression, feel free to take a stab at it.

The problem was that the input wasn't available for reading before the component renders, meaning you could set valueAsDate | valueAsNumber, but you couldn't read the value until after the first render. Switching both the getter and setter to use an in-memory input solved it.

[davidkudera]

Isn't something like this enough for testing?

it('should read valueAsDate after writing value', async () => {
  const el = await fixture<SlInput>(html` <sl-input type="date"></sl-input> `);
  el.value = '2023-04-14';
  const date = el.valueAsDate;
  expect(date).to.be.instanceOf(Date);
  expect(date!.getFullYear()).to.equal(2023);
  expect(date!.getMonth()).to.equal(3);
  expect(date!.getDate()).to.equal(14);
});

Problem is that it's failing on Webkit for me. But then I tried to test the same thing with native input and it's failing too:

it('should read valueAsDate after writing value on native input', async () => {
  const el = await fixture<HTMLInputElement>(html` <input type="date"> `);
  el.value = '2023-04-14';
  const date = el.valueAsDate;
  expect(date).to.be.instanceOf(Date);
  expect(date!.getFullYear()).to.equal(2023);
  expect(date!.getMonth()).to.equal(3);
  expect(date!.getDate()).to.equal(14);
});

---

Btw the reason I'm using the value for updating the value instead of valueAsDate are timezones and for me the difference is -2 hours.

const date = new Date();
nativeInput.valueAsDate = date;
console.log(date.getTime() === nativeInput.valueAsDate.getTime());	// output: false

[claviska]

The behavior exhibited in the test runner, for whatever reason, was not the same as what I saw locally. Could be a timing/lifecycle issue. Didn't have time to dive in.