Re-render breaks form when serializedValue is set

[michielpauw]

Re-render breaks form when serializedValue is set

[gerjanvangeest]

The same behaviour can be found in other input fields. The serializedValue() is used to update the serializedValue every time the value changes, so it is part of our core value behaviour. Changing this is will be hard, since it will influence a lot of code.

What you could do is to set the serializedValue only once in firstUpdated(), and not on every paint.

[Madses]

I've figured out a workaround until fixed. Seems to work without any issues for me.
Given that it consistently defaults to ".serializedValue," we can ensure that this value stays current whenever a modification occurs. While not ideal, it serves the purpose for now.

 static properties = {
    count: { type: Number },
    currentValue : {type: String}
  };

  constructor() {
    super();
    this.count = 0;
    this.currentValue = 'diplodocus';
  }
  
render() {
    return html` <lion-form
      name="dinosaurs"
      .serializedValue=${{ favoriteDinosaur: this.currentValue }}
    >
      <form>
        <lion-radio-group
          name="favoriteDinosaur"
          label="What is your favourite dinosaur ${this.count}?"
          @model-value-changed=${(e) => {
            this.currentValue = e.target.modelValue;
            this.count += 1;
          }}
        >
          <lion-radio
            label="Allosaurus"
            .choiceValue=${'allosaurus'}
          ></lion-radio>

          <lion-radio
            label="Brontosaurus"
            .choiceValue=${'brontosaurus'}
          ></lion-radio>

          <lion-radio
            label="Diplodocus"
            .choiceValue=${'diplodocus'}
          ></lion-radio>
        </lion-radio-group>
      </form>
    </lion-form>`;

[Madses]

I believe I've found the cause of this issue.
in ChoiceGroupMixin.js there is the following function.

      /**
       * @param {ChoiceInputHost} el
       * @param {string} val
       */
      const checkCondition = (el, val) => el.serializedValue.value === val;

      if (this.__isInitialSerializedValue) {
        this.registrationComplete.then(() => {
          this.__isInitialSerializedValue = false;
          this._setCheckedElements(value, checkCondition);
          this.requestUpdate('serializedValue');
        });
      } else {
        this._setCheckedElements(value, checkCondition);
        this.requestUpdate('serializedValue');
      }
    }

Here's whats happening:

1. If statement succesfully runs, and sets the checked value to value.
2. Right after this function runs again, but since this.__isInitialSerializedValue was set to false it then goes to the else statement. and sets the checked value once again, which is fine, but (i believe) unnecessary.
3. Every time we try to select a different radio option set serializedValue(value) gets invoked for some reason. The value briefly changes to the desired one, but then it immediately changes back to the initial serializedValue.

I am not sure what the desired result was of this specific part :

        this._setCheckedElements(value, checkCondition);
        this.requestUpdate('serializedValue');
      } 

So i'm not confident in proposing a solution yet. Although i did try a few things that seem to work and passed the tests.

One is simply removing this._setCheckedElements(value, checkCondition); in the else block. Another was instead of passing value to this._setCheckedElements inside the else block, we could instead pass this.modelValue as an argument. e.g. this._setCheckedElements(this.modelValue, checkCondition);