dropdown_pills added to elements;

[cityremade]

Now filter[in] supports multi select with values as pills; Config inside in-filter: "dropdown_pills": true

[dbauszus-glx]

The duplicate code issue has been resolved in 20d3b48

Inside the filter.mjs I add pills to be dropdown_pills, ie. true || false/undefined

  if (filter.dropdown || filter.dropdown_pills) {

    const dropdown = mapp.ui.elements.dropdown({
      pills: filter.dropdown_pills,
      multi: true,
      placeholder: 'Select Multiple',
      entries: filter[filter.type].map(val => ({
        title: val,
        option: val,
        selected: chkSet.has(val)
      })),
      callback: async (e, options) => {

        if (!options.length) {

          // Remove empty array filter.
          delete layer.filter.current[filter.field]
        } else {

          // Set filter values array from options.
          Object.assign(layer.filter.current, {
            [filter.field]: {
              [filter.type]: options
            }
          })
        }

        applyFilter(layer)
      }
    })

    return mapp.utils.html.node`<div class="filter">${dropdown}`
  }

In the dropdown.mjs I add the pills element to params.pills if true.

  params.pills &&= mapp.ui.elements.pills({
    pills: [...params.selectedTitles],
    addCallback: (val, _pills) => {
      params.callback?.(null, [..._pills]);
    },
    removeCallback: (val, _pills) => {

      // deselect value in the list
      const item = ul.find(li => li.title === val);
      item.classList.remove('selected');
      params.selectedTitles.delete(item.title);
      params.selectedOptions.delete(item.dataset.option);
      params.callback?.(null, [..._pills]);
    }
  });

A dropdown pills by definition will always be a dropdown multi and I made the mistake of introducing the dropdown_multi element before thinking this through which leaves us now with this technical debt module.

export default (params) => {

  console.warn('mapp.ui.elements.dropdown should be used with the multi flag')

  params.multi = true

  return mapp.ui.elements.dropdown(params)
}

[dbauszus-glx]

I've added a maxHeight param for dropdowns.

This is set to 300 for filter.

[dbauszus-glx]

this works as expected for me.

[AlexanderGeere]

Should these work when an in filter is applied to an integer field?

I put an example in bugs_testing/filter/filter.json

The pills dont get removed when you click the x.

I assume because 1 !== "1" .

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[dbauszus-glx]

@AlexanderGeere this should now be fixed by adding and checking on the data-value attribute instead of the title.