soramitsu / soramitsu-js-ui-library

Javascript UI library used by SORAMITSU
Apache License 2.0
8 stars 3 forks source link

Remove no-model-value-strict-sync property #577

Closed VladislavPopovSR closed 8 months ago

VladislavPopovSR commented 9 months ago

According to the following issue https://github.com/soramitsu/soramitsu-js-ui-library/issues/539
This is how s-text-field works right now:

function onInput(e: Event) {
  const el = e.target as HTMLInputElement
  model.value = el.value
  if (!props.noModelValueStrictSync) {
    el.value = model.value ?? ''
  }
}

Example

Our function that lets user write only numbers:

function updateNums(val: string) {
        if (/^\d+$/.test(val)) {
          model.value = val
        }
      }


Pay attention that this limitation works only with :model-value, otherwise with v-model it doesn't.


Usage :

<STextField :model-value="model" v-bind="$attrs" @update:model-value="updateNums" >

https://github.com/soramitsu/soramitsu-js-ui-library/assets/149061523/78d4ad6f-3db2-474d-9140-9bd3336d50db


Here: 1.As it supposed to be, we can't write any text except numbers but our cursor moves at the end when we try to. 2.When we type at the middle of the text, our cursor moves at the end. 3.Input and model values are always the same.
Now with no-model-value-strict-sync property:

https://github.com/soramitsu/soramitsu-js-ui-library/assets/149061523/1d263ce5-0da0-4b0c-8023-91d9bef5be2a


Here: 1.We are able to write anything we want. 2.Blur event change our text to the last correct one. As it seems to me, this is not user-friendly.
Since we've already implemented properties that lets us control user's input such as :error, :message, :success I think we don't need to control it additionally with @update:model-value. Hence, we could simplify our <input/> by using v-model="model" in it instead of passing :value and @input. By that, we will be always sure that our model and input values are always synced.
Note: 1.We have to consider how it would affect in already used components in our projects since it's a backward incompatible change. 2.Special cases such as above one when we try to control user's input by passing callback.