Rerender input text

[Deleted user]

Hello.
I've been using µhtml since yesterday, but I'm having some issues with text type input. It's probably not a problem coming from µhtml, but since I'm stuck and a demo could help improve the documentation, I'm posting it here. So here is the code:

const d = {exp: ''}
const SearchModule = () => {
	console.log('searchModule render :', d.exp)
	const
		refresh = () => render(document.getElementById('hookSearchModule'), SearchModule()),
		changeExp = e => {
			d.exp = e.target.value
			refresh()
		},
		clear = () => {
			d.exp = ''
			refresh()
		}
	return html`
		<input value=${d.exp} oninput=${e => changeExp(e)}>
		${d.exp !== '' ? html`<span onclick=${() => clear()}>Clear</span>` : ''}
	`
}

Two problems :

1. When the changeExp() function is executed, the text field loses focus.
2. When we click "Clear", the text remains in the text field, while d.exp = ''.

Can you help me ?

[Andrea Giammarchi]

this code makes no sense ... you don't render within a component that returns html, you render outside, wherever it is that you render this component in the first place, or the rendering stack is upside-down.

At this point, as you wrote this example, I believe you have an issue with orchestrating or architecture around your logic, so I suggest you look at uland instead, which is probably closer to what you are after ... and it promotes pure components, not components rendering within the part of the DOM they are already ... this is not how any FW works, starting from React, Preact, lit, and others ... you don't render from the component, like ever, you eventually delegate the outer render through side effects or explicitly via reference.