Why Input box value not force reset to old value if new value not accepted using x-data and x-model

[cencool]

Having this html element:

<input x-data="myInput" type="number" x-model="dataInput" >

And this corresponding js:

document.addEventListener("alpine:init", () => {
Alpine.data('myInput', () => ({
  '_dataInput': 50,
  get dataInput() { return this._dataInput},
  set dataInput(val) {
    if (val <100) {
      this._dataInput = val;
      console.log("new value is:"+this._dataInput);
    } else {
      console.log('input out of range');
      console.log('current value is:'+this._dataInput);
    }
  }
}))
});

Input box keeps showing any entered value even if value is not accepted by setter.

I expected the input value to be reset to actual model value if new value is not accepted by setter because when I tried to bind x-model to $store instead of x-data it makes input box value reset to old value if new value is not accepted. I think it has something to do with calling this function that gets called in case of $store but not for x-data (https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/directives/x-model.js):

el._x_forceModelUpdate = (value) => {
        // If nested model key is undefined, set the default value to empty string.
        if (value === undefined && typeof expression === 'string' && expression.match(/\./)) value = ''

        // @todo: This is nasty
        window.fromModel = true
        mutateDom(() => bind(el, 'value', value))
        delete window.fromModel
    }

[SimoTod]

i'm not sure that the code above is the reason.
Simply you typed something in your input box, the input triggers an input event, the event is captured by x-model which calls the setter that, because of your logic, doesn't update the parameter. Because there's is no change on the parameter, x-model doesn't bind the value back to the input.

Not sure why it works with a store, in theory it shouldn't.

To achieve what you need, you can use this workaround.

    } else {
          let oldValue = this._dataInput
          this._dataInput = ''
          this._dataInput = oldValue
          console.log('input out of range');
          console.log('current value is:'+this._dataInput);
        }

[SimoTod]

can you post the example using $store that works?

[cencool]

Html:

<input x-data type="number" x-model="$store.myStore.dataInput" >

corresponding js:

document.addEventListener("alpine:init", () => {
  Alpine.store("myStore", {
    _dataInput: 10,
    get dataInput() {return this._dataInput;},
    set dataInput(val) {
      if (val< 100) {
        this._dataInput = val;
        console.log("new value is:"+this._dataInput);
      } else {
        console.log('input out of range');
        console.log('current value is:'+this._dataInput);
      };
    }
  });
});

[ekwoka]

So, this has to do with nested values. basically, modeling to a value on an object, vs modelling on a top level value.

Curious...

[ekwoka]

Okay, so it's just due to how the reactivity engine works.

Since you aren't setting the value here, when it's at the top level, the set isn't watched at all, but when it's a child, the set and get are seen and tracked even if the set doesn't do anything, so long as the value being set is different (even if it never gets added).

Curious that it works that way.

Anyhow, there are better ways to handle this specific need, like a mask, or validation attributes.