slim-select icon indicating copy to clipboard operation
slim-select copied to clipboard

ss-hide elements at top of ss-list div making it harder to select options using arrow keys

Open Mbuckley0 opened this issue 4 years ago • 0 comments

Describe the bug When I do an ajax search the first two elements in ss-list are empty divs with classes of "ss-option ss-hide" and when I try and select an option using the arrow keys it selects these two elements first. Below is how I initialize my slim select.

    new SlimSelect({
      select: '#uid_or_summary_cont',
      searchingText: 'Searching...',
      limit: 10,
      onChange: (ticket) => {
        const token = $('*[data-behavior="autocomplete"]').parent().parent().find('input[name="q[authenticity_token]"]').val();
        $('*[data-behavior="autocomplete"]').val('');
        $.ajax(`/tickets/${ticket.value}/intervals?event=start`, {
          "method": 'post',
          "data": { authenticity_token: token }
        })
      },
      searchFilter: (option, search) => {
        return option;
      },
      ajax: debounce((search, callback) => {
        if (search.length < 3) {
          callback('Need 3 characters')
          return
        }
        fetch(`/tickets_autocomplete.json?q=${encodeURIComponent(search)}`)
          .then(function (response) {
            return response.json()
          })
          .then(function (json) {
            let data = [];
            for (let i = 0; i < json.length; i++) {
              let ticket = json[ i ];
              data.push({ text: `${ticket.uid} - ${ticket.summary}`, value: ticket.id })
            }
            $('.ss-hide').remove();
            callback(data)
          })
          .catch(function (error) {
            callback(false)
          })
      }, 250)
    })

Screenshots Add screenshots to help explain your issue. If you do not submit at least an image or animated gif I most likely wont look into it. image

Mbuckley0 avatar Mar 02 '21 21:03 Mbuckley0