Safari: input placeholder shown below value after update
derhuerst opened this issue · 2 comments
derhuerst commented
I'm having this issue with Safari 10.0.3
on macOS 10.12.3
. I tried Firefox and Chrome and couldn't reproduce it. I'm using virtual-dom@2.1.1
.
I'm trying to render an <input>
with autocompletion. I listen to keypress
events on it to get the value. The issue I'm facing occurs when I update the value
of the <input>
from ''
to some non-empty string.
const h = require('virtual-dom/h')
const completion = (placeholder, value, suggest) =>
h('input', {
type: 'text',
placeholder: placeholder,
'ev-keypress': (e) => setTimeout(() => {
suggest(e.target.value)
}, 1),
value: query
})
const render = (state, actions) =>
h('form', {
action: '#'
}, [
completion('from', state.from.name, actions.suggestFrom),
completion('to', state.to.name, actions.suggestTo),
h('button', {
type: 'button',
'ev-click': () => actions.search()
}, 'lets go')
])
module.exports = render
The (expected) result in Chrome:
The (unexpected) result in Safari:
I haven't dug into the virtual-dom patching logic, so I can't tell if this is a bug in Safari or in virtual-dom. Thanks for helping out!
guivr commented
+1
HopeLyn commented
It seems to be a Safari bug.You can try this demo https://jsbin.com/rogoludahu/edit?html,js,output