2021-01-29

Datalist displays duplicate (redundant) suggestions

I have a html table which contains multiple input fields in order to process some data about an entry. One input contains the code, the user can manually modify the predefined code (if any) and add a custom id. this is how I implemented the input field described above

<input id="productCode_99999908" class="form-control id-control" list="productList_99999908" value="99999908">
<datalist id="productList_99999908">
... options
</datalist>

The options look like these (I do not have duplicated options):

....
                       <option value="45577">
                            45577
                        </option>
                        <option value="300046592">
                            300046592
                        </option>
                        <option value="300005449">
                            300005449
                        </option>
                        <option value="300013358">
                            300013358
                        </option>
                        <option value="300015407">
                            300015407
                        </option>
                        <option value="300020294">
                            300020294
                        </option>
...

The problem arises after I modify the predefined id with a custom one. It displays 2 times as a suggestion the custom id (the custom id exists in the system, I say custom because it was manually written by the user) and it looks like this:

enter image description here

With the predefined ids it looks like this

enter image description here

It doesn't even display a single option, even though the option with that id is present in the datalist.

I have tried to turn off autocomplete and checked for duplicated options, but none of these worked. What am I doing wrong? Why do I get these suggestions displayed twice when an user changes the predefined id with one already existent in the system?

Here is POC that reproduces the error (it has the full option set, notice there's no duplicates): https://jsfiddle.net/yxqp2tf7/ enter image description here

Snippet example:

<input id="productCode_99999908" class="form-control id-control" list="productList_99999908" value="99999908" >
<datalist id="productList_99999908">
  <option value="45577">
    45577
  </option>
  <option value="300046592">
    300046592
  </option>
  <option value="300005449">
    300005449
  </option>
  <option value="300013358">
    300013358
  </option>
  <option value="300015407">
    300015407
  </option>
  <option value="300020294">
    300020294
  </option>
</datalist>


from Recent Questions - Stack Overflow https://ift.tt/3qXp6Az
https://ift.tt/39otVwJ

No comments:

Post a Comment