Towards the end of last week I spent quite a lot of time working with customisations of theComboBox</a></a> in Flex 2 for work, and it was really beginning to bug me how when I typed to select an item, the selection was only ever the first item that matched the letter I was typing. Having had it become second nature, since it’s a feature of my browser of choice Firefox, that I can type the beginning of a word to jump to an option (e.g. “United K” to jump to “United Kingdom” in a list of countries) I now really missed it when using Flex.</p>
I didn't have time to look at a work around during work hours as it really isn't a feature that is needed of our product, just something that annoyed me. So I decided that I would quickly knock a solution together at the weekend and then write up a short post of how it was done, in case other people wanted to find out how to do it.
However it didn't quite work out that way.
After a few frustrating hours I managed to get a fully working solution which I thought I'd share. You can read on for the story behind the component, or you can head straight to the FoxyComboBox code page to view the results.
So I sat down late Saturday afternoon and started poking through the source code for the ComboBox and its related classes (god bless Adobe for providing the source). I noticed that the `listBase` class (which the `ComboBox` uses for its drop down) has a method in there already to find an option by string, "fantastic this will be a doddle", I thought.
So I figured all I needed was to created an new `List` which overrode the `keyDownHandler` so we could build up a string to use as the search criteria (and reset it during a period of typing in-activity). Then it would be a simple case of using the new `List` as the `dropDownFactory` by extending the `ComboBox`.
That took a while to figure out after looking through the source code, but not that long to implement - and it worked, except for one problem: it only worked while the `ComboBox` option list was open.
This didn't make much sense, a bit of debugging and a lot of "Huh, why would it do that?", it seems the `ComboBox` gets a new drop down every time we try and change the selected index, unless the user has opened the drop down and selected an item. This wasn't going to work.
So my next attempt was to turn it on it's head, make the `ComboBox` the controller for this functionality, this isn't the best solution (in my opinion) but it was the only workable one I could think of.
A bit of refactoring later it worked, except now whenever the drop down was open and the user typed it would close as soon as we changed the selected index. This made no sense, the normal `ComboBox` wasn't doing this and I was calling the same `findByString()` method to select the item. I spent a bit more time digging through the source code and in the debugger trying figure out where it was being closed and why.
It turned out (and I had seen this earlier but glossed over it) that the `keyDownHandler()` in the `ComboBox` was setting a private property called `bInKeyDown` which if true stopped the `dropdown_changeHandler()` method from closing the drop down. Phew, that was a whistle stop tour of the inner workings of the `ComboBox`, hope you're still following along.
So I had to hack around further to emulate this functionality in as clean a way as possible in my custom `ComboBox`, as `bInKeyDown` is private. I did something very similar, but made my variable a bit more generic and protected rather than private - just in case I want to extend the FoxyComboBox later.
A bit of refactoring later it worked.
So what I thought would be a quick half an hour job turned out to be about 4 1/2 hours work and a new code release from me (as I don't want anyone else to have to suffer with this issue, either the end users of Flex or a developer digging through the `ComboBox`to make a custom version with this functionality).
So if this is something you wish your Flex application could do, you can grab it now, I called it the FoxyComboBox (not very inspired, but my brain was a little fried by the end of it).
p.s. Those of you who have downloaded something of mine before will notice I've introduced a download page where I ask for a tip and give a suggested amount. In the case of the FoxyComboBox that is a measly $2, so I ask if you download it and find it useful please consider if saving yourself a few hours of time is worth $2, or maybe more :). Okay, that's the begging over with, enjoy.