You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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')
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
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.
Hi again!
For a project I'm looking at building with Marko 4 (I'm on
Marko 4.2.0
), I want aninput
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:However, on the first input (e.g. entering a space) the
style
attribute (that the autosize-module sets) seems to be removed:Full code: https://github.com/maximilianschmitt/lasso-test
I wonder if this is intentional behaviour? I've also tried manually resizing in the
onRender
andonUpdate
hooks but this causes flickering.Now finally I modified
autosize-input
to return the style and use Marko's state to update thestyle
together with theinput
's value. This solves my issue above but with this pattern the cursor of theinput
jumps to the end if I enter a character:Full code: https://github.com/maximilianschmitt/lasso-test/tree/cursor-jump
Thanks for your help! :)
The text was updated successfully, but these errors were encountered: