filtering items popup

[yinonov]

Filtering list items popup

A common component seen across the organization

It is a popup surface box with the anatomy of a header, body, footer:

• header contains input to filter data list
• body reflects the filtered list items
• footer containing the action buttons

the request to consolidate such a pattern to a dedicated component is challenged by its generics and is often built with an opinionated approach under the hood (pre-rendered/lazy-rendered/hidden items, virtual scroll, should it have selection state like in data grid etc'...)

Current provision

Button triggers a dropdown with developer own content and slots for header, body, footer.
same result can be achieved by little extra code.
this brings up the question whether the common usage raises the priority of having a dedicated component featuring a unified behavior. if so, this needs a spec of its input, output, events, methods, exposed properties and more...

<div style="position: relative">
  <vwc-button label="Open dropdown" icon="chevron-down-line"></vwc-button>
  <vwc-dropdown>
    <vwc-textfield slot="header" placeholder="Search..." icon="search-line" dense></vwc-textfield>
    <vwc-data-grid id="data-grid">
      <vwc-data-grid-column class="selector" selector="multi"></vwc-data-grid-column>
      <vwc-data-grid-column path="label" header="Entity ID"></vwc-data-grid-column>
    </vwc-data-grid>
    <vwc-button slot="actions">Cancel</vwc-button>
    <vwc-button slot="actions" layout="filled">Done</vwc-button>
  </vwc-dropdown>
</div>

Similar components

GitHub

Considered Alternatives

• Combobox - similar to datalist but with multiple selection
  

[rsreeju]

From a perspective of an autocomplete, we are looking for something which is more intuitive(like a textbox) and does not involve a button to open the dropdown, The above is a data-grid encapsulated in a modal, and there are too many actions the user needs to perform to select something, An autocomplete should be pretty intuitive like the combobox mentioned above (but the example 1 or 2 in this-> https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html) without the dropdown button

[adam-trojanowski]

The main problem with having it simply as a list of building blocks is consistency. Given that this is going to be used across different products and technologies it would be beneficial to limit the possibilities. Hide some of the logic needed for this kind of component to work.

If we leave it as is each time someone builds something similar they will have to answer the same questions:

• what are the size restrictions,
• how to properly position it and what kind of trigger element to use,
• how should the selection behave - only a checkbox or additional styles for rows,
• should the dropdown close on click outside,
• how to show if no elements match the search,

They might not be big issues alone but might cause a lot of confusion when implemented in different ways in different places. We created such a component in our application and had to decide on the behavior. It would be a lot easier if we had the possibility to use a component that works the way the UI and UX designers want.

Also, there might be incompatibilities between different components. Like e.g. we used a list component that was clearing the selected items each time we filtered the elements. Or not being able to use a select component as a trigger.

[yinonov]

will be handled in https://jira.vonage.com/browse/VIV-654

[yinonov]

related request by UP require virtual scrolling to handle large length items

[ydinari]

To me it seems that this should just be the select component, with extra optional parts like the search box, header/footer etc.
A feature not mentioned here that might be useful is some way to divide the items into categories (the example I have in mind is extensions categories in VBC, like call-group, call-queue, regular extension, VR, etc.).
There should be a way to see for each item which category it is, and also search by category.
Another thing which I assume is included but didn't see mentioned is that it must have a virtual scroll, o/w it will be useless for large amounts of data.

[jshenkman]

Another use case requested from AI

Adding the selected items from the dropdown to a chip-set in the input field.

[yinonov]

(proposed components architecture)

[jshenkman]

[yinonov]

Follow https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-select-only.html