Log a message if we can't update an element's value that has focus

[lardcanoe]

This is a follow up for #2163

The behavior of not updating an element that has focus is pretty subtle, and easy to miss in the docs.

I'm proposing logging a message when this happens. It really is only needed in development mode, and can probably be a debug message as well, I just wasn't sure the right way to do that in this code base. Happy to change.

But this has bitten so many people over the years that we at least should be warned that it happens. You can see the events in the console with the new value, but it doesn't update.

[lardcanoe]

Also noticed this right above it:

          const sourceValue = source.value ?? source.getAttribute(name);
          if (target.value === sourceValue) {
            // actually set the value attribute to sync it with the value property
            target.setAttribute("value", source.getAttribute(name));

Why set to source.getAttribute(name) and not use sourceValue?

[SteffenDE]

I think the cleanest way would be to do it like this:

Suggested change

	logError('Skipped updating value on focused element.', target);
	opts.log && opts.log('Skipped updating value on focused element.', target);

and then add a mergeAttrs method to DOMPatch:

mergeAttrs(target, source, opts = {}) {
  DOM.mergeAttrs(target, source, { ...opts, log: this.liveSocket.isDebugEnabled() && console.log })
}

Then replace any DOM.mergeAttrs calls in DOMPatch with this.mergeAttrs.

[SteffenDE]

Why set to source.getAttribute(name) and not use sourceValue?

I think it's because we want to synchronize the actual attribute values. Most of the time those would be the same, but I'm currently not sure if it's always the case.