Safari: input placeholder shown below value after update

[derhuerst]

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]

+1

[HopeLyn]

It seems to be a Safari bug.You can try this demo https://jsbin.com/rogoludahu/edit?html,js,output