Values not being removed or added correctly

[shornuk]

Opening as a new issue as this doesn't seem to be fixed. Thought it might have been our set up that was interfering but we've stripped everything back to the simplest of test cases. Using the following...

<form class="" action="" method="get">
    <input type='text'
   placeholder='Programming language name'
   class='flexdatalist'
   data-min-length='1'
   multiple='multiple'
   list='languages'
   value='PHP'
   name='dataTest'
   />

<datalist id="languages">
    <option value="PHP">PHP</option>
    <option value="JavaScript">JavaScript</option>
    <option value="Cobol">Cobol</option>
    <option value="C#">C#</option>
    <option value="C++">C++</option>
    <option value="Java">Java</option>
    <option value="Pascal">Pascal</option>
    <option value="FORTRAN">FORTRAN</option>
    <option value="Lisp">Lisp</option>
    <option value="Swift">Swift</option>
</datalist>

<input type="submit" name="" value="Save">

If I select PHP and hit save, it saves the PHP string. All good. If I then select another option, for example Swift, The value gets updated as PHP,PHP,Swift so it's adding the initial value again. In addition to this, removing any of these values does nothing. Using version 2.2.2.

[shornuk]

Thanks for flagging this. If you need anything from me to help this along let me know. This bug is affecting a bit site at the moment, so keen to get it fixed! Thanks.

[sergiodlopes]

@shornuk thanks for bringing up the bug. I'll fix it ASAP.

[samhibberd]

++++++1

[roooodcastro]

Just noted that this is still an issue. This happens when there's a starting selected value, and only on multiple mode.

I didn't read the source enough to understand why, but upon initialization, the library seems to be loading the original value correctly to fvalue initially all at once, but then it iterates over each value again and adds it again to the fvalue value. This effectively duplicates evey entry, and then removing a single tag, only one of the values will be removed, leaving the other behind.

I found a quick fix for it, which is basically block a duplicate insertion to the fvalue list. By putting the following code inside fvalue.multiple.push (line 669 on 2.2.4), the duplicate entries will not be added, eliminating the problem:

push: function (val, index) {
  var current = _this.fvalue.get();

  // ===== NEW CODE =====
  if (current.includes(val)) {
    return;
  }
  // ====================

  val = _this.fvalue.toObj(val);
  current.push(val);
  val = _this.fvalue.toStr(current);
  _this.value = val;
},

As I said, this is probably just a quick fix, and ideally the root of the problem (finding out why it's trying to duplicate the entries) should be found as well. I will be opening a PR with this fix, as I think validating for duplicate entries is also important and should be done regardless.

[DarthSonic]

@roooodcastro if option "allowDuplicateValues" is set to true you would filter duplicate entries that are wanted in my opinion. I think the following code would be correct. With allowDuplicateValues set to true the bug will still be there :-(

 push: function (val, index) {
                    var options = _this.options.get();
                    var current = _this.fvalue.get();
                    if (options.allowDuplicateValues || !current.includes(val)) {
                        val = _this.fvalue.toObj(val);
                        current.push(val);
                        val = _this.fvalue.toStr(current);
                        _this.value = val;
                    }
                },

[chriscalip]

2019 bump