diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js
index 955847030d..2d67b9dd75 100644
--- a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js
+++ b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js
@@ -439,7 +439,6 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
*/
placeholder: {
type: String,
- value: '',
observer: '_placeholderChanged',
},
@@ -794,9 +793,12 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
// Use placeholder for announcing items
if (this._hasValue) {
const tmpPlaceholder = this._mergeItemLabels(selectedItems);
+ if (this.__tmpA11yPlaceholder === undefined) {
+ this.__savedPlaceholder = this.placeholder;
+ }
this.__tmpA11yPlaceholder = tmpPlaceholder;
this.placeholder = tmpPlaceholder;
- } else {
+ } else if (this.__tmpA11yPlaceholder !== undefined) {
delete this.__tmpA11yPlaceholder;
this.placeholder = this.__savedPlaceholder;
}
diff --git a/packages/multi-select-combo-box/test/accessibility.test.js b/packages/multi-select-combo-box/test/accessibility.test.js
index a01e752781..bae8ea03c3 100644
--- a/packages/multi-select-combo-box/test/accessibility.test.js
+++ b/packages/multi-select-combo-box/test/accessibility.test.js
@@ -35,46 +35,60 @@ describe('accessibility', () => {
describe('placeholder', () => {
beforeEach(() => {
- comboBox = fixtureSync(`
-
- `);
+ // Do not use `fixtureSync()` helper to test the case where both placeholder
+ // and selectedItems are set when the component is initialized, to make sure
+ // that the placeholder is correctly restored after clearing selectedItems.
+ comboBox = document.createElement('vaadin-multi-select-combo-box');
+ comboBox.placeholder = 'Fruits';
comboBox.items = ['Apple', 'Banana', 'Lemon', 'Orange'];
+ comboBox.selectedItems = ['Apple', 'Banana'];
+ document.body.appendChild(comboBox);
inputElement = comboBox.inputElement;
});
+ afterEach(() => {
+ comboBox.remove();
+ });
+
it('should set input placeholder when selected items are changed', () => {
- comboBox.selectedItems = ['Apple', 'Banana'];
expect(inputElement.getAttribute('placeholder')).to.equal('Apple, Banana');
});
it('should restore original placeholder when selected items are removed', () => {
- comboBox.selectedItems = ['Apple', 'Banana'];
comboBox.selectedItems = [];
expect(inputElement.getAttribute('placeholder')).to.equal('Fruits');
});
it('should keep input placeholder when placeholder property is updated', () => {
- comboBox.selectedItems = ['Apple', 'Banana'];
comboBox.placeholder = 'Options';
expect(inputElement.getAttribute('placeholder')).to.equal('Apple, Banana');
});
it('should restore updated placeholder when placeholder property is updated', () => {
- comboBox.selectedItems = ['Apple', 'Banana'];
comboBox.placeholder = 'Options';
comboBox.selectedItems = [];
expect(inputElement.getAttribute('placeholder')).to.equal('Options');
});
+ it('should restore placeholder when selected items are updated and removed', () => {
+ comboBox.selectedItems = ['Apple'];
+ comboBox.selectedItems = [];
+ expect(inputElement.getAttribute('placeholder')).to.equal('Fruits');
+ });
+
it('should restore empty placeholder when selected items are removed', () => {
comboBox.placeholder = '';
- comboBox.selectedItems = ['Apple', 'Banana'];
comboBox.selectedItems = [];
expect(comboBox.placeholder).to.be.equal('');
expect(inputElement.hasAttribute('placeholder')).to.be.false;
});
+
+ it('should clear placeholder when set to undefined and selected items are removed', () => {
+ comboBox.placeholder = undefined;
+ comboBox.selectedItems = [];
+ expect(comboBox.placeholder).to.be.undefined;
+ expect(inputElement.hasAttribute('placeholder')).to.be.false;
+ });
});
});
diff --git a/packages/multi-select-combo-box/test/dom/__snapshots__/multi-select-combo-box.test.snap.js b/packages/multi-select-combo-box/test/dom/__snapshots__/multi-select-combo-box.test.snap.js
index 41966bb37d..701b2a4064 100644
--- a/packages/multi-select-combo-box/test/dom/__snapshots__/multi-select-combo-box.test.snap.js
+++ b/packages/multi-select-combo-box/test/dom/__snapshots__/multi-select-combo-box.test.snap.js
@@ -2,7 +2,7 @@
export const snapshots = {};
snapshots["vaadin-multi-select-combo-box host default"] =
-`
+`