← 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:

Self-refreshing, NO id on the select (observe-all)

The regression case: a select with no id, observed by an observe-all AjaxObserveField (no observeFieldID), refreshing its own container. Without the derived-id fix, focus drops to <body> on every change. Focus must survive here too, with no id in the template.

server sees: