Question

This is a problem I’ve had to deal with in my last project, and although I found a working solution, I wasn’t too happy with it and am wondering if there would’ve been a better, cleaner one.

Problem:

Basically, I needed to implement a ComboBox that inserts or appends an item (selected from the drop-down list) to the textbox instead of replacing all text in the textbox:

• If the textbox has some text selected, that selection would be replaced with an item selected from the drop-down list;
• If the textbox has no text selected, an item chosen from the drop-down list would be appended in the textbox field.

As it turned out, I could not achieve this behaviour by handling a combination of ComboBox‘s events (such as SelectedIndexChanged, SelectionChangeCommitted, TextChanged etc.) because the ComboBox control would finally synchronize the textbox field with the selected item from the drop-down list without raising any further events afterwards.

Solution, a.k.a ugly hack:

I ended up installing a Timer that, once expired, causes an update to the textbox field. The timer was set to approx. 30 ms, which should be long enough to ensure that all events (SelectedIndexChanged, TextUpdate etc.) have been processed, and short enough to not feel like a noticeable lag to the user.

Does anyone know of a cleaner solution to this problem?

Answer 1

What you want is not a ComboBox. You want a text box and a button that when clicked gives you a drop down list of tokens which can be inserted into the text box. A ComboBox nearly gives you this but is unsuitable for two reasons:

• Users known how ComboBoxes work. Your component looks like a ComboBox but doesn’t behave like one. That will just cause confusion.
• ComboBoxes are designed in the way they are so that users will always know how they work and can be familiar with them. It is not the intention that the selected item differs from the text. You can’t override this behaviour because if you did, it would no longer be a ComboBox as we know it. Trying to override it to completely change the behavior of the control in a way for which it was not designed causes problems that are not easy to fix.

You should write a custom control which implements the features you need and has a UI that better represents what you are doing. To look for inspiration you could consider the ‘insert emoticon’ UI that many instant messaging programs have. Notice that the button is not typically inside the text box but a completely separate button.