[tw5] Combobox idea

Mat · November 4, 2021, 11:38am

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:

Editing the field loses focus so only one letter at a time.
When the tag has a value, this is what is shown in the editor.
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?

<:-)

EricShulman · November 4, 2021, 2:30pm

My <<edit-list>> macro initially use a similar approach, but I found that it had too many problems with both interaction and appearance. I also wanted to support use of inline lists (where the listbox is visible below the input fied), multiple selection (using standard shift-click/ctrl-click interaction), confirmation of input (ok/cancel), progressive filtering (reducing the list choices to only those that contain the current edit field input), and integration with my popup Calendar for selecting and formatting date input (see It's About Time! — TiddlyTools: "Small Tools for Big Ideas!" (tm)) .

The result still uses an underlying edit-text and select widget, but they are surrounded by a bunch of custom wikitext code to handle lots of options and use-cases.

Check it out here: EditListMacro — TiddlyTools: "Small Tools for Big Ideas!" (tm)
To see it in action, view EditListMacro — TiddlyTools: "Small Tools for Big Ideas!" (tm)

enjoy,
-e

Mat · November 4, 2021, 3:20pm

Thanks Eric. I also have other ways of achieving the end result, but with the direct editing of currentTiddler fields in TW 5.2.0 I thought I had come across a very simple solution for a simple combobox.

However, some further experimenting shows that the lost focus was easily solved by just removing the placeholder reference to edited field. Not even sure what I was thinking (why should it refer to there?). Also unnecessary with the selectwidget default stuff.
Thus the remaining two problems are:

When the tag has a value, this is what is shown in the editor.
The popup should be pushed to the left but I can’t find the css selector for it! A less elegant workaround is to simply put the (still styled) SelectWidget before the EditTextWidget, so the button is to the left of the editor.

And here’s the simplified code. When used you see the problems.

<$edit-text field=selection placeholder=“type or select”/>
<$select field=selection class=“select-btn” >

A Tale of Two Cities A New Kind of Science The Dice Man .select-btn {width:19px; margin-left:-4px;}

telumire · November 4, 2021, 7:31pm

Here’s the code to push the dropdown in the proper place :

<$select field=selection class="select-btn" > A Tale of Two Cities A New Kind of Science The Dice Man <$edit-text field=selection placeholder="type or select"/> .combobox{ position:relative; display:inline-block; width:150px; } .combobox input{ z-index:1; position:absolute; left:0; width:100%; opacity:1; } .combobox .select-btn{ position:absolute; left:0; width:calc(100% + 20px); }

EricShulman · November 4, 2021, 8:42pm

Here’s the code to push the dropdown in the proper place :

There are layout problems with this solution. To see the issues,
try putting “before” and “after” text surrounding the “combobox” span:

BEFORE<span class="combobox">
<$select field=selection class="select-btn" >
<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>
<$edit-text field=selection placeholder="type or select"/>
</span>AFTER

and compare this with the result of showing only an $edit-text widget:

BEFORE<$edit-text field=selection placeholder="type or select"/>AFTER

For the simple inline $edit-text widget, the BEFORE/AFTER text appears as you would expect:
immediately preceding/following the input element and vertically aligned with the middle of the text

However, note the placement and vertical alignment of the “combobox” elements:
The edit input/select elements appear vertically aligned below the baseline of the surrounding BEFORE/AFTER text, and the AFTER text is immediately following the input element, rather than following the select element.

The CSS you provided also assumes that the width of the select element’s downarrow button will always
a fixed width of “20px”, which may not be the case depending upon which browser you are using.

Also, there is also a slight difference in the height of the select element vs the edit element (testing with Chrome),
so that the bottom border of the select element, which is behind the edit element, is visible, creating the appearance of a double-thick bottom border on the edit element

-e

Mat · November 4, 2021, 9:48pm

@Télumire, I appreciate your effort! @Eric, thank you for your shrewd analysis!

Does anyone know why it is barely possible to manipulate this dropdown though? I do get the following to work, so the options are targettable:

.select-btn option {background:red}

…but attempting to e.g position absolute, margin-left, or some such fails. It is as if they are immune to most styling.

@anyone - is this because of the SelectWidget implementation, or is it the underlying html select / option tags? Surely people will want to style these? If it indeed is the underlying html tags, then is it at all possible to do something about it in the SelectWidget, hypothetically?

Thanx!

<:-)

telumire · November 4, 2021, 10:17pm

@Eric Shulman my bad, I should have tested it a bit more. Thanks for pointing this out ! @Mat, this is because the select element is OS dependent according to this stack overflow answer : html - How do I style a <select> dropdown with only CSS? - Stack Overflow

This one can be used properly inline (with a text after and before) and use a pseudo element as a select button (I left it as a red square but it’s easy to customize), but there is still an issue with vertical align… I’m still sharing it just in case, if I find something better I’ll post it :

<$vars

height=“20px”

.combobox{ position: relative; display: inline-block; width: 150px; height:<>; background:red; margin-right:20px; } .combobox .select-btn{ width:100%; cursor:pointer; opacity:0; pointer-event:all; } .combobox input{ top:0; position:absolute; width:100%; } .combobox .drodown-btn{ width:calc(<> + 100%); top:0; position:absolute; cursor:pointer; } .combobox .drodown-btn:after{ display:block; content:""; width:calc(<> + 4px); position:absolute; inset:0 0 0 auto; background:red; pointer-events: none; }

BEFORE<$edit-text field=selection placeholder=“type or select”/>AFTER

before

<$select field=selection class=“select-btn” >

A Tale of Two Cities A New Kind of Science The Dice Man <$edit-text field=selection placeholder="type or select"/> after

telumire · November 5, 2021, 1:00am

Ok I think this time I got it. Here : TiddlyTweaks — Small tweaks for TiddlyWiki

Combobox.tid (1.88 KB)

Mat · November 5, 2021, 7:50am

@Telumire - Man, that turned out quite ambitious. Looks great! Of course, we’re way past “I found a way to quickly throw together a combobox”, but IF one has the styles, perhaps as part of ones standard custom stylesheets, then it is only a matter applying it with @@.combobox.
For the record, here’s the general and simplified call:

@@.combobox
<$edit-text field=selection placeholder=“type or select”/>
<$select field=selection>
…options list…
</$select>

@@

@Telumire - I put up a combobox.tiddlyhost.com for the idea. May I include your stylesheet there, obviously with credits to you and a ref to this thread? The purpose with the page is to make it findable when one needs it. (I temporarily just made that page public, it is obviously not ready for anyone to see.)

<:-)

telumire · November 5, 2021, 1:56pm

Thanks @Mat! Sure, go ahead

Mat · November 13, 2021, 11:09pm

@Télumire - I now tried to copy your code but it doesn’t work properly. I’ve tried both from your attached tid file and using the copy-to-clipboard feature on your webpage but the code seems buggy e.g the – prefix on css variables are enclosed in apostrophes.

This is what I get, i.e the “Combobox” tiddler is your downloaded attachment tid above, and in the tiddler “A styled combobox” I’ve tweaked some stuff so it basically works but the button arrow is not showing.

What am I doing wrong or missing?

Thanx

<:-)

telumire · November 14, 2021, 2:27am

Hi @Mat, the apostrophes are intended, they prevent the wikitext parsing to convert the – into – (the wikitext cant be disabled with a pragma rule or a content type in thatcase because this would prevent the use of widgets).

Drag & drop this tiddler in your wiki and it should work fine (it does on my end in a fresh tiddlywiki)

combobox_style.tid (1.53 KB)

Mat · November 14, 2021, 8:02am

Thanks Télumire using your exact styling tiddler, but with an added type:text/css this is how it appears, i.e om my Win 10 machine using Chrome, Brave and Firefox I see a selectwidget but no visible button and you can’t type into it. Same thing on my android phone, Brave browser. Does my page not appear like that on your machine? BTW, on your webpage, the combobox tiddler is folded and on my phone I can’t access the unfold button.

<:-)

telumire · November 14, 2021, 8:27pm

With the content type text/css , tiddlywiki treats the content of the tiddler as plain text, and since I rely on wikitext parsing this breaks the stylesheet. You need to use the content type text/vnd.tiddlywiki or leave the type field blank (since this is the default type for a tiddler).

I uploaded a demo on https://combobox-demo.tiddlyhost.com/, it works both on my laptop (tested with edge, chrome, firefox, brave) and smartphone (chrome and firefox android). If this still doesn’t work for you maybe it is because of one of your browser add-ons ?

Another possible explanation is that you have a broken CSS stylesheet somewhere on your wiki, this can break subsequent stylesheets.

I investigated and it doesn’t seem to be the case in your demo.