_TabContent holds the search box as well as the list, so the search sits inside the panel and filters within the selected tab.

Which values each definition reads is the whole design:

• f.letters reads the unfiltered values, so tabs never disappear while you type and the selected tab cannot be stranded on an empty panel
• f.valuesShown reads the filtered values, so the counts follow the search and a tab showing zero tells you not to look there

This test case carries the same _TabButton and _TabContent payload tiddlers as the previous example, with the search box added to the panel.

The input is a sibling of the list rather than a child of anything that recomputes, which is what keeps the cursor in the box while you type.

Type ba and watch the counts change. Any tab whose count falls to zero shows the emptyMessage of the list instead of nothing at all.

Important:

If you want to modify the example make sure to copy all three tiddlers: Output, _TabButton and _TabContent.