I just came up with a simple idea for how to create comboboxes. Basically it is an EditTextWidget just before the SelectWidget and the select widget is styled to only show the arrow and both widgets refer to the same field.
Three problems:
1) Editing the field loses focus so only one letter at a time.
2) When the <option> tag has a value, this is what is shown in the editor.
3) The popup should be pushed to the left but I can't find the css selector. (Attempting to right click on it to inspect it doesn't work.)
Any ideas?
<:-)
__________________________________________________________
Code for you to copy paste, showing two examples including the problems:
<$edit-text field=selection placeholder={{!!selection}}/>
<$select tiddler='About' field=selection class="select-btn" default={{About!!selection}} >
<option disabled hidden>{{About!!selection}}</option>
<option>one</option>
<option>two</option>
<option>three</option>
</$select>
option with values shows the value rather than the label:<br>
<$edit-text field=selection2 placeholder={{About!!selection2}}/>
<$select tiddler='About' field=selection2 class="select-btn" default={{About!!selection2}} >
<option disabled hidden>{{About!!selection2}}</option>
<option value='cities'>A Tale of Two Cities</option>
<option value='science'>A New Kind of Science</option>
<option value='dice'>The Dice Man</option>
</$select>
<style>
.select-btn {width:19px; margin-left:-4px;}
</style>