Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
ComboBox in table cells - slow rendering
Hi, here is one question for comunity...
does anyone experienced problems with slow table rendering when using ComboBox component instead of TextField in table cells when table is in editable mode? Can this be optimized somehow?
I have table with 15 rows. Table have 14 columns, three of them use ComboBox component in their cells.
The reason for using combos is to restrict user for entering unallowed values when editing values in table cells.
I already done some optimization by setting combos initial data set to only one value and adding focus listener to every combo to populate initial data set with additional data when needed (some kind of lazy loading). But still it takes 3-4 seconds to render table in browser after server response. I suspect that performance bottleneck is in heavy javacript which browser can't handle smoothly.
ComboBox is very slow to render in Firefox, in other browsers it's reasonably fast. (My little test)
A similar performance problem existed for TextField (see #2898) and a simple but hack-ish fix made the rendering faster by orders of magnitude. Matti commented that the problem could be solved for ComboBox with a similar hack, but as ComboBox is a much more complex component, it would probably cause a lot of regressions.
Please file a ticket similar to that for the TextField, but as this may be difficult to fix, it won't be put first in the queue.
Thanks Marko for your response. I will do that, but until ComboBox problem resolution does any one has any idea for workaround to this problem?
My idea is that maybe I could use TextField's instead of combos and then on focus event replace corresponding TextField with ComboBox. But I don't know how to accomplish this. If possible, I will like to keep my field factory as a central place for table field generation. Any thoughts?
Yeah, it should work that you have TextsFields in the Table and when you select one, it immediately changes into a ComboBox. However... if you click the dropdown button on the ComboBox, it loses focus and changes back to a TextField. :blink: This is a known bug (#4285. It applies to Select component as well, and NativeSelect doesn't allow focus and blur events yet, so using other components doesn't help either.
In your Table case, I guess you could work around the problem by changing the ComboBox back to TextField only when another TextField gets the focus. This way, you would always have one ComboBox "open" in the table, even though it doesn't have focus if the focus is outside the table, but that probably doesn't hurt.
You can see my example how it works (or doesn't). If you press the Down key on keyboard to open the selection list of the ComboBox, it works just fine! The problem exists only when clicking the small arrow with mouse.