Comments (7)
Hi @shand2
Thank you for opening this issue. It might as well be an issue with the web component, but I will let you know more once I have done an initial investigation.
BR,
Goran
from multiselect-combo-box-flow.
Hi @shand2
I tried the following very simple demo:
@Route("")
public class DemoView extends VerticalLayout {
public DemoView() {
MultiselectComboBox<String> multiselectComboBox = new MultiselectComboBox();
multiselectComboBox.setLabel("Multiselect combo box with string items");
multiselectComboBox.setPlaceholder("Add");
multiselectComboBox.setItems("Item 1", "Item 2", "Item 3", "Item 4");
multiselectComboBox.addSelectionListener(event -> Notification.show(event.toString()));
FormLayout content = new FormLayout();
content.add(multiselectComboBox);
VerticalLayout layout = new VerticalLayout();
layout.add(content);
Dialog dialog = new Dialog();
dialog.add(layout);
Button button = new Button("open dialog", click -> {
dialog.open();
});
add(button);
}
The check icons were correctly being displayed. Therefore I suspect the issue might be related to something else but I could not quite understand your code as the formatting seems to be a bit broken.
Could you please update the formatting, as well provide a minimal working example that reproduces this issue?
Thank you,
Goran
from multiselect-combo-box-flow.
Hi Gatanaso,
here is a simple example of my project to reproduce the issue. After selection the content with the dialog button is loaded.
It is independent of using in a modal dialog or not
@route("")
public class DemoView extends VerticalLayout {
private final ComboBox<String> versionSelect = new ComboBox<>();
public DemoView() {
versionSelect.setItems(Arrays.asList("test1", "test2"));
add(versionSelect);
versionSelect.addValueChangeListener(event -> {
reloadContent();
});
}
private void reloadContent() {
MultiselectComboBox<String> multiselectComboBox = new MultiselectComboBox();
multiselectComboBox.setLabel("Multiselect combo box with string items");
multiselectComboBox.setPlaceholder("Add");
multiselectComboBox.setItems("Item 1", "Item 2", "Item 3", "Item 4");
multiselectComboBox.addSelectionListener(event -> Notification.show(event.toString()));
FormLayout content = new FormLayout();
content.add(multiselectComboBox);
VerticalLayout layout = new VerticalLayout();
layout.add(content);
add(layout);
};
}
Thank you,
André
from multiselect-combo-box-flow.
Hi @shand2
I created a new project, with one view and added the above code that you posted. Similarly as before, everything worked as expected.
Here is the project zip, for you to give it a try and let me know if it works on your side:
multiselect-combo-box-demo.zip
Additionally, since I am unable to reproduce the issue, could you please upload a zip of a project that reproduces the issue, as well provide more details on how you build and run the project and which browser(s) you use?
Kind regards,
Goran
from multiselect-combo-box-flow.
Hi Goran,
here is a complete runnable example close to my project using gradle and SpringBoot.
multiselect-combo-box-demo.zip
I can reproduce the issue with chrome 76.x and firefox 60.x browser
King regards,
André
from multiselect-combo-box-flow.
Hello @shand2
I think there has been some misunderstanding here :) The sample project you posted uses Vaadin 13
:
The 2.x.x
versions of this component are intended to work with Vaadin 14
in npm
mode.
To use Vaadin 13
in bower
mode, you should use the 1.x.x
version of this component, more specifically the latest 1.0.1
version.
I only recently updated the version information for this component: https://github.com/gatanaso/multiselect-combo-box-flow#version-information
UPDATE: I was able to reproduce this issue with Vaadin 13 and will investigate further. Until I get it fixed I would suggest if it's possible that you update to Vaadin 14 as Vaadin 13 support ends in approximately two weeks.
Kind regards,
Goran
from multiselect-combo-box-flow.
Hi @shand2
I think the above issue is quite interesting :) Basically the main cause of the problem was that not all dependencies were being loaded for the MultiselectComboBox
when it was not initially added to the view (i.e. it was included via a dialog or in the selection handler).
To fix this you need to add the following annotation to your view:
@Uses(MultiselectComboBox.class)
For example, in the above project, that would be:
@Route("")
@Theme(Material.class)
@Uses(MultiselectComboBox.class)
public class DemoView extends VerticalLayout
To explain why this is needed, here is a excerpt from the javadoc
of the annotation:
/**
* Marks that an annotated component implicitly uses another component. This
* will ensure that any dependencies of the used component are also loaded....
* ...
* Marking class A with @Uses(B.class) will ensure all
* @StyleSheet, @HtmlImport, @JavaScript dependencies for
* class B are loaded when class A is used.
*/
BR,
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.