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 [email protected].

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