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

Attribute not rendered by Marko is not preserved if component first rendered on the server #644

Closed
maximilianschmitt opened this issue Apr 1, 2017 · 2 comments
Assignees
Labels
type:bug A bug report

Comments

@maximilianschmitt
Copy link

maximilianschmitt commented Apr 1, 2017

Hi again!

For a project I'm looking at building with Marko 4 (I'm on Marko 4.2.0), I want an input element to be autosized so that the width of the input always matches the width of its value. The following works fine for the most part:

static var autosize = require('autosize-input')

class {
  onMount() {
    // resize the input on input
    autosize(this.getEl('input'))
  }

  onChange(e) {
    this.emit('change', e.target.value)
  }
}

div
  input key='input' value=input.value on-input('onChange')
  -- ${input.value}

However, on the first input (e.g. entering a space) the style attribute (that the autosize-module sets) seems to be removed:

marko-autosize

Full code: https://github.com/maximilianschmitt/lasso-test

I wonder if this is intentional behaviour? I've also tried manually resizing in the onRender and onUpdate hooks but this causes flickering.

Now finally I modified autosize-input to return the style and use Marko's state to update the style together with the input's value. This solves my issue above but with this pattern the cursor of the input jumps to the end if I enter a character:

static var autosize = require('autosize-input')

class {
  onCreate() {
    this.state = { autosize: {} }
  }

  onMount() {
    var component = this

    // on every input, call my callback with the calculated style
    autosize(this.getEl('input'), null, function (style) {
      component.state.autosize = style
      component.setStateDirty('autosize')
    })
  }

  onChange(e) {
    this.emit('change', e.target.value)
  }
}

div
  input key='input' style=state.autosize value=input.value on-input('onChange')

marko-autosize2

Full code: https://github.com/maximilianschmitt/lasso-test/tree/cursor-jump

Thanks for your help! :)

@patrick-steele-idem patrick-steele-idem self-assigned this Apr 1, 2017
@patrick-steele-idem patrick-steele-idem added the type:bug A bug report label Apr 1, 2017
@patrick-steele-idem patrick-steele-idem changed the title Using vanilla JavaScript to manipulate the DOM Attribute not rendered by Marko is not preserved if component first rendered on the server Apr 1, 2017
@patrick-steele-idem
Copy link
Contributor

Thank you for the detailed problem report and the working app. Very helpful!

I put in a fix to make this issue less common, but it has to do with the UI component first being rendered on the server and Marko not knowing that an attribute was added by an external library/code. When rendered initially in the browser this would not have be an issue. The fix skips removing non-Marko rendered attributes for keyed elements. The key is required to know for sure that the two elements being diffed are the matching elements.

New version published with fix: [email protected]

@maximilianschmitt
Copy link
Author

Hey, thanks! Interesting to hear what caused the issue. 4.2.1 fixed it for me. :) Thank you!

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

No branches or pull requests

2 participants