Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
VladislavPopovSR opened this issue Feb 28, 2024 · 0 comments
Closed

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

VladislavPopovSR opened this issue Feb 28, 2024 · 0 comments
Labels
next Related to next lib iteration, i.e. based on Vue 3

Comments

@VladislavPopovSR
Copy link

According to the following issue #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" >
2024-02-28.17.58.25.mov

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:

2024-02-28.18.07.57.mov


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.

@VladislavPopovSR VladislavPopovSR added the next Related to next lib iteration, i.e. based on Vue 3 label Feb 28, 2024
@VladislavPopovSR VladislavPopovSR closed this as not planned Won't fix, can't repro, duplicate, stale Mar 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
next Related to next lib iteration, i.e. based on Vue 3
Projects
None yet
Development

No branches or pull requests

1 participant