0

I have a big problem with the Semantic UI dropdown extension. I've configured multiple search dropdown with ajax back-end. And when user tries to add new item, form is submitting.

My dropdown configuration:

    $(e).dropdown({
        allowAdditions: true,
        saveRemoteData: false,
        action: 'combo',
        match: 'text',
        apiSettings: {
          url: data('api')
        }
    })

Goal: when I add new item to multiple select, form is not submitting.

Максим Владимирович
  • 373
  • 3
  • 13
  • are you using "enter" key inside select? – romaninsh Aug 25 '16 at 18:32
  • Goal of field is possibility to select tags from existing list or create new. And when I add nonexistance tag and press ENTER - form submits. – Максим Владимирович Aug 26 '16 at 08:48
  • I do not know what's the actual solution to this, but you can probably add key handler for the div that sits around dropdown and execute stopPropagation() on the event. Maybe this is helpful: http://stackoverflow.com/questions/10313032/stop-enter-return-key-submitting-a-form – romaninsh Aug 26 '16 at 14:16
  • the trick is to place the handler on the element that contains only the dropdown form. – romaninsh Aug 26 '16 at 14:17
  • Did you ever figure this one out? Just stumbled across the same issue and before I spend the time I thought I'd ask! – Nils Luxton Nov 21 '16 at 07:57
  • Looks like this might be a bug since Semantic has specific handling for stopping this from happening, it just seems to not work. – Nils Luxton Nov 21 '16 at 08:15
  • 1
    @NilsLuxton: in case you haven't found a solution yet, see my answer below (add the `keys.delimiter` key in your dropdown declaration). – clairity Jan 23 '17 at 04:03
  • @clairity thanks - I submitted a PR to fix the issue but no movement in a few weeks; I think Semantic is going through a slow phase...! – Nils Luxton Jan 23 '17 at 11:33

1 Answers1

2

i found a solution to this issue here (Semantic-UI issue #4763). just add the keys.delimiter key in your dropdown declaration:

$(e).dropdown({
  allowAdditions: true,
  saveRemoteData: false,
  action: 'combo',
  match: 'text',
  apiSettings: {
    url: data('api')
  },
  keys: {
    delimiter: 13
  }
});
clairity
  • 496
  • 3
  • 10