← Playground index

wonder-select (morph-native searchable select)

A searchable select that enhances a native <select class="ajax-popup-button"> in place via a custom element - no foreign sibling DOM, so it survives a morph. The select sits inside the morphing container below. Pick a fruit; the server echo updates via an observe field. Then "refresh container" to morph the container around the live widget - it must stay usable with its value intact.

Container refresh count: 0

Refresh (morph) this container
Server sees selected: (none)

Self-refreshing container

Here the select's OWN container is what its change refreshes - the select sits inside selfContainer and its observe field updates selfContainer. Picking an option morphs the container the widget lives in. Focus must survive.

Self-change count: 0 · server sees: