Allow multiselection at once for Multiselect Combobox

[mlopezFC]

Describe your motivation

Right now if you type a filter and then select an item, when clicking on the item, it will remove the text that you entered to filter the item, select the item and then display all of the items starting from the first one. Sometimes you have an extensive data set and you spent some time writing the filter text and you want to select more than one item that matched the filter, then you need to write the filter again, and that involves several rountrips (and waiting) until you can select the other item. It get worse if you want to select more (4 or 5)

Describe the solution you'd like

It would be great that after entering the filter text, the user would be allowed to select more than one item, leaving the filter text still available.

Describe alternatives you've considered

No response

Additional context

Maybe it would be disabled by default, but it could be enabled by a special property or flag

[mlopezFC]

With the following workaround it works as expected:

        comboBox.getElement().executeJs("this.__selectItem=function(item) {\n"
        		+ "    const itemsCopy = [...this.selectedItems];\n"
        		+ "\n"
        		+ "    const index = this._findIndex(item, itemsCopy, this.itemIdPath);\n"
        		+ "    const itemLabel = this._getItemLabel(item);\n"
        		+ "\n"
        		+ "    let isSelected = false;\n"
        		+ "\n"
        		+ "    if (index !== -1) {\n"
        		+ "      const lastFilter = this._lastFilter;\n"
        		+ "      // Do not unselect when manually typing and committing an already selected item.\n"
        		+ "      if (lastFilter && lastFilter.toLowerCase() === itemLabel.toLowerCase()) {\n"
        		+ "        this.__clearFilter();\n"
        		+ "        return;\n"
        		+ "      }\n"
        		+ "\n"
        		+ "      itemsCopy.splice(index, 1);\n"
        		+ "    } else {\n"
        		+ "      itemsCopy.push(item);\n"
        		+ "      isSelected = true;\n"
        		+ "    }\n"
        		+ "\n"
        		+ "    this.__updateSelection(itemsCopy);\n"
        		+ "\n"
        		+ "    // Suppress `value-changed` event.\n"
        		+ "\n"
        		+ "    this.__announceItem(itemLabel, isSelected, itemsCopy.length);\n"
        		+ "  }");

What is doing is basically to overwrite the "__selectItem" method with a new version that is missing the following line:

this.__clearFilter();

That avoids clearing the filter when an item is selecting. With this change the component seems to behave well:

Maybe it would be a nice idea to enable this with a method like: setClearOnSelection(false) or something like that.

[web-padawan]

Apart from the __clearFilter() method mentioned above, there is also this one in ComboBoxMixin:

web-components/packages/combo-box/src/vaadin-combo-box-mixin.js

Line 949 in 904c9ff

this.filter = '';

I suppose that fixing this would require making this behavior in _commitValue configurable - prototype.

[TatuLund]

There is a different type of workaround here

https://gist.github.com/TatuLund/6610a522c6048c8dfdf67d360b83825b

That workaround is not is not very good in UX as dropdown is closed and re-opened, hence some un-necessary delay.