Comments (13)
Hi @gatanaso,
I did some research and I found following. There is private static <T> Set<T> presentationToModel
method in MultiselectComboBox. HashSet implementation which is used doesn't keep the order of items returned from client side. As it maps the values correctly to model values and then add it to set. But it doesn't keep the order returned by client. Wouldn't it be better to use LinkedHashSet instead to keep the order from presentation to model layer?
L.
from multiselect-combo-box-flow.
Hi @gatanaso
this is the most simplified version of the usage I can create :) The MultiComboBoxField must be preserved as it behaves as wrapper Set<->List.
https://github.com/lipisak/multiselectcombo-vaadin14-minimalRunnable
This project uses only vaadin and your component - no 3rd parties.
Thank you
J.
from multiselect-combo-box-flow.
Oh, I think I've understood the issue wrongly from the beginning 😄 Yes, you are right. If you use set ordered, the selected items will be sorted alphabetically on the client. If you omit it, then the value order is lost due to the internal data representation.
from multiselect-combo-box-flow.
Guess it doesn't matter in my example if you set ordered true or not (on my wrapper which passes the value to your component). The items are incorrectly set anyway :) If I understand ordered feature correctly - it is used on client side. The server only gets the values from client side, maps it to server representation and returns them in the Set. Which unfortunatelly can be ordered differently - HashSet vs LinkedHashSet :) I don't even know how it's possible that your examples work.
from multiselect-combo-box-flow.
This is exactly the example I should provide you :-D It would be very helpful for us, if this feature would be possible.
We use it for months, days, etc. For users it's very confusing when they select days that they are not in "logical" order.
from multiselect-combo-box-flow.
Hi @gatanaso,
If you guide me some way we can create pull request for this, but I am not sure, what should be changed. J
from multiselect-combo-box-flow.
Hi @lipisak,
It could be related to the caption generator, but I can't say for certain. The "ordered" example in the demo https://multiselect-combo-box-flow.herokuapp.com seems to be working okay.
Any chance you can provide a minimal reproducible project with the issue?
Thank you,
Goran
from multiselect-combo-box-flow.
Hi @gatanaso,
I am attaching a Java file - actually it's kind of wrapper - because we need values of the filed to be in list not in set. Whenever we use it during selection it changes the order of selected items (should be in order of initial list). When we set initial selected items it is also set incorrectly. The strange thing is that it is no alphabetically neither in Czech nor in English. It is not sorted according to provided Items. I would guess it's caused by internal HashSet representation, but I haven't dig too deep into it.
from multiselect-combo-box-flow.
Hi @lipisak and thanks for sharing the file. Unfortunately I can't really run or use that to see how it behaves, as it's missing other internal classes from your project.
Are you able to reproduce the issue with the vanilla MultiselectComboBox
and not in the custom wrapper field that you have shared?
from multiselect-combo-box-flow.
Hi @lipisak,
Yeah, though the ordered
demo from https://multiselect-combo-box-flow.herokuapp.com works perfectly fine without any issues, even with the current presentation to model behavior and the sorting being done on the client-side.
from multiselect-combo-box-flow.
Just to clarify one more time. Your use case is such that the selected items (tokens/chips) always need to be sorted based on how they appear in the drop-down list, irregardless of the order in which those were selected?
For example, if the list of drop-down items is: "Mon, Tue, Wed, Thu, Fri, Sat and Sun". And nothing is selected. You open the drop-down and select: "Wed, Sat and Mon", then the expectation is that the selected items (tokens/chips) will be in the following order: "Mon, Wed and Sat" (they will appear as such in the input field)?
If this assumption is correct, unfortunately, this is not currently supported and would need to be implemented separately.
from multiselect-combo-box-flow.
Thanks, I will have to think about it as well. Not sure what would be the best approach. I am open to suggestions in case you have any :)
from multiselect-combo-box-flow.
Hi @lipisak,
One way you can temporarily work around this limitation, is by overriding the client side sorting:
MultiselectComboBox<String> multiselectComboBox = new MultiselectComboBox<>();
multiselectComboBox.setItems("Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday");
multiselectComboBox.setOrdered(true);
multiselectComboBox.getElement().executeJs(""
+ "const _sorter = {'monday': 1, 'tuesday': 2, 'wednesday': 3, 'thursday': 4, 'friday': 5, 'saturday': 6, 'sunday': 7};"
+ "$0._sortSelectedItems = (selectedItems) => {"
+ " selectedItems.sort((item1, item2) => {"
+ " const item1Str = String(item1['label']).toLowerCase();"
+ " const item2Str = String(item2['label']).toLowerCase();"
+ " return _sorter[item1Str] - _sorter[item2Str];"
+ " });"
+ "};"
);
The above code will ensure that the list of selected items is sorted according to the given sorter
object values and fits your use case 🙂
Hope this helps,
Goran
from multiselect-combo-box-flow.
Related Issues (20)
- Implement standard HasLabel interface
- Vaadin 14 - version 2.5.0 - Custom Values are not returned by getValue and getSelectedItems
- Vaadin 14 - version 2.5.0 - Smaller height in readOnly mode with empty value
- Dropdown doesn't display when switching from setEnabled(false) to setEnabled(true) HOT 2
- Allow typeahead text to be automatically cleared when an item is selected, else manually cleared via API?
- Item selected by clicking outside the component
- Js error this.$.comboBox.$.dropdown._setOverlayWidth (Vaadin 23)
- ERROR in ../node_modules/multiselect-combo-box/src/multiselect-combo-box-dropdown.js (Vaadin23.3.3) HOT 2
- The setCompactModeLabelGenerator method is not working. HOT 1
- "Select All" functionality
- Vaadin 18 - BUG when setting compact mode for combobox HOT 1
- Vaadin 14 - BUG - Dropdown not defocusing on second click
- Problem in Vaadin 19.0.4 HOT 2
- Placeholder should be hidden when a value is selected HOT 7
- "Cannot read property of undefined" with Vaadin 21 (Flow) HOT 5
- Split itemsLabelGenerator and valuesLabelGenerator
- Component does not work with vaadin 22 HOT 20
- Add additonal attribute or class to overlay HOT 1
- Items not showing when using larger data HOT 9
- Using the component with Vaadin 23 gives NotSupportedError: CustomElementRegistry.define: 'vaadin-lumo-styles' has already been defined as a custom element. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from multiselect-combo-box-flow.