Some text inputs cannot be updated fully by the onscreen keyboard.

[duhrer]

Yet again, Catawiki presents a unique problem for us. Their search box is a combo, backed by a text input. Although the text appears onscreen when you update the text input value, the value disappears before you can navigate to the button to launch their search. I suspect their autocomplete mechanism is clearing the value.

Keeping this open to collect further examples and hopefully come up with an explanation and a workaround.

[duhrer]

I now have three clear examples of this:

1. The loop count input for Weavly
2. The number inputs for the UIO controls on the Fluid project web site
3. The search on Catawiki

In investigating each of these, I see that they have a shadow root attached to them, and that somewhere within the shadow root is a div containing the value that's displayed onscreen. Thus, there are three separate issues:

1. Is the form value updated?
2. Is the change displayed on screen?
3. Do any changes that need to happen take place when the value is updated?

The answer needs to be "yes" for all three of these, but until at least points 1 and 2 are addressed, it's hard to know if changes that are supposed to happen in response are not happening because the value simply hasn't been updated properly.

[duhrer]

It looks like most of the issues are solved by firing an input event as well as a change event.

This works for Weavly's number inputs and the Catawiki search.

There is still something going on with the UIO controls, nothing updates on screen and the change never takes effect, but this is moving in the right direction.

[duhrer]

What's odd is that if I assign the UIO element to a global variable using the Chrome debugger and then perform the same sequence (set value, fire input, fire change), it works.

[duhrer]

I thought it might be a timing thing, but chaining the updates also works in the console, i.e. temp1.value="2"; temp1.dispatchEvent(new Event("input", { bubbles: true, composed: true })); temp1.dispatchEvent(new Event("change"));.

[duhrer]

The issues with UIO were down to the "form field update" check being overly restrictive, i.e. it was not updating number fields at all. The new approach works for all three cases now.