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

preserve input value if no attr change #27

Open
hesxenon opened this issue Dec 28, 2023 · 1 comment
Open

preserve input value if no attr change #27

hesxenon opened this issue Dec 28, 2023 · 1 comment

Comments

@hesxenon
Copy link

Since it is possible(-ish) to work around this feel free to close this issue, but imho the current behaviour around input values is wrong/confusing.

Consider the following structure:

<form name="form">
      <input id="input" placeholder="Test">
</form>

If I type something into this input and then do

Idiomorph.morph(document.form, document.form.outerHTML)

I'd expect the inputs value to be preserved since nothing changed and an inputs value is only loosely coupled to the attribute of the same name, similar to the play state of a video.

According to this part the value of an input is reset if

  • the new content (from) does not have a value attribute
  • the beforeAttributeUpdate callback does not return false

Imho it would be better to simplify this to a mismatch in the value attribute like this:

if(from.getAttribute("value") !== to.getAttribute("value") && !beforeAttributeUpdate(attr, to, 'remove')) {
  to.value = from.getAttribute("value") ?? ""
}

meaning that the behaviour can be depicted as the following table

value attribute of to (existing) value attribute of from (new content) behaviour
null (not present) null (not present) no desire to change -> preserve state
some value the same value no desire to change -> preserve state
some value null (not present) desire to reset -> set to ''
null (not present) some value desire to change -> set to value of from
some value some other value desire to change -> set to value of from
@hesxenon
Copy link
Author

I've forked your repository and after some experiments my manual tests seem to do what I'd expect. You can find the source here: https://github.com/hesxenon/idiomorph/blob/main/src/idiomorph.js#L350

I'd be glad to open a PR if you agree with the premise of this issue and if you tell me how to run your test suite 😉 - because I only got a conn refused from mocha-chrome 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant