Show all dropdown options after a selection is made


I think the FlexBox should work more like a dropdown menu, in that if you click the arrow icon you should always see the full list of options to select from.

Currently, you see the full list the first time you click the arrow. But once a selection is made, the arrow is now useless because clicking on it only shows the single option (current selection).

Which makes this really just a type-ahead / autocomplete field, not really a combobox...


file attachments


sjudkins wrote May 13, 2013 at 7:50 PM

I have been very close to implementing this functionality myself. Although, the closest I came was when you click on the arrow after making a selection, the paging no longer works, UGH. I am going to give up for now and just hope that this will be added to the "official" version. I don't really like having customizations like that anyway, since it has a tendency to break future upgrades.

sjudkins wrote May 14, 2013 at 2:56 PM

I was able to solve the "final bug" I was having with this feature and have it successfully implemented. I used this thread:

https://flexbox.codeplex.com/discussions/251643 (I added the code posted by "Yoannr" AND "jimiscott".)

Although, this made an existing bug very apparent. This bug is reproducible with or without the code above. After you have made a selection, click on the Input Box and delete your selection, then (while still in the input box) move the cursor straight over (horizontally) to the arrow and click it. Most of the time, it will just "flash" and not show the results (list items). The reason is, the "blur()" handler on the input box sets a timeout with a delay of 200 milliseconds, then hides the results window. This isn't enough time for the handler to fire and complete before the arrow.click() handler tries to show the results, so the results immediately get "hidden". (The workaround was to click on some other element or the screen, then click on the arrow. This gives the timer enough time to fire the "hideResults()" function, BEFORE you click the arrow.)

There is an easy code fix to this bug, though. In the blur() handler for the input element, change the setTimeout(hideResults()) call from 200 milliseconds to 100 milliseconds. That seems to work perfectly.