search

orchidjs / tom-select

Tom Select is a lightweight (~16kb gzipped) hybrid of a textbox and select box. Forked from selectize.js to provide a framework agnostic autocomplete widget with native-feeling keyboard navigation. Useful for tagging, contact lists, etc.
https://tom-select.js.org
Apache License 2.0
1.66k stars 123 forks source link

RESULT_CODE_HUNG with a list of around 300 items #533

Closed orasik closed 11 months ago

orasik commented 1 year ago

Describe the bug The page hangs when typing more than 5 letters to search.

To Reproduce Use the following select

<select class="tom-select" multiple="multiple" id="timezone-abbr">
                                        <option value="ACDT">[ACDT] Australian Central Daylight Saving Time UTC+10:30</option>
                                        <option value="ACST">[ACST] Australian Central Standard Time UTC+09:30</option>
                                        <option value="ACT">[ACT] Acre Time UTC−05</option>
                                        <option value="ACT">[ACT] ASEAN Common Time (proposed) UTC+08:00</option>
                                        <option value="ACWST">[ACWST] Australian Central Western Standard Time (unofficial) UTC+08:45</option>
                                        <option value="ADT">[ADT] Atlantic Daylight Time UTC−03</option>
                                        <option value="AEDT">[AEDT] Australian Eastern Daylight Saving Time UTC+11</option>
                                        <option value="AEST">[AEST] Australian Eastern Standard Time UTC+10</option>
                                        <option value="AET">[AET] Australian Eastern Time UTC+10/UTC+11</option>
                                        <option value="AFT">[AFT] Afghanistan Time UTC+04:30</option>
                                        <option value="AKDT">[AKDT] Alaska Daylight Time UTC−08</option>
                                        <option value="AKST">[AKST] Alaska Standard Time UTC−09</option>
                                        <option value="ALMT">[ALMT] Alma-Ata Time[1] UTC+06</option>
                                        <option value="AMST">[AMST] Amazon Summer Time (Brazil)[2] UTC−03</option>
                                        <option value="AMT">[AMT] Amazon Time (Brazil)[3] UTC−04</option>
                                        <option value="AMT">[AMT] Armenia Time UTC+04</option>
                                        <option value="ANAT">[ANAT] Anadyr Time[4] UTC+12</option>
                                        <option value="AQTT">[AQTT] Aqtobe Time[5] UTC+05</option>
                                        <option value="ART">[ART] Argentina Time UTC−03</option>
                                        <option value="AST">[AST] Arabia Standard Time UTC+03</option>
                                        <option value="AST">[AST] Atlantic Standard Time UTC−04</option>
                                        <option value="AWST">[AWST] Australian Western Standard Time UTC+08</option>
                                        <option value="AZOST">[AZOST] Azores Summer Time UTC±00</option>
                                        <option value="AZOT">[AZOT] Azores Standard Time UTC−01</option>
                                        <option value="AZT">[AZT] Azerbaijan Time UTC+04</option>
                                        <option value="BNT">[BNT] Brunei Time UTC+08</option>
                                        <option value="BIOT">[BIOT] British Indian Ocean Time UTC+06</option>
                                        <option value="BIT">[BIT] Baker Island Time UTC−12</option>
                                        <option value="BOT">[BOT] Bolivia Time UTC−04</option>
                                        <option value="BRST">[BRST] Brasília Summer Time UTC−02</option>
                                        <option value="BRT">[BRT] Brasília Time UTC−03</option>
                                        <option value="BST">[BST] Bangladesh Standard Time UTC+06</option>
                                        <option value="BST">[BST] Bougainville Standard Time[6] UTC+11</option>
                                        <option value="BST">[BST] British Summer TimeUTC+01</option>
                                        <option value="BTT">[BTT] Bhutan Time UTC+06</option>
                                        <option value="CAT">[CAT] Central Africa Time UTC+02</option>
                                        <option value="CCT">[CCT] Cocos Islands Time UTC+06:30</option>
                                        <option value="CDT">[CDT] Central Daylight Time (North America) UTC−05</option>
                                        <option value="CDT">[CDT] Cuba Daylight Time[7] UTC−04</option>
                                        <option value="CEST">[CEST] Central European Summer Time UTC+02</option>
                                        <option value="CET">[CET] Central European Time UTC+01</option>
                                        <option value="CHADT">[CHADT] Chatham Daylight Time UTC+13:45</option>
                                        <option value="CHAST">[CHAST] Chatham Standard Time UTC+12:45</option>
                                        <option value="CHOT">[CHOT] Choibalsan Standard Time UTC+08</option>
                                        <option value="CHOST">[CHOST] Choibalsan Summer Time UTC+09</option>
                                        <option value="CHST">[CHST] Chamorro Standard Time UTC+10</option>
                                        <option value="CHUT">[CHUT] Chuuk Time UTC+10</option>
                                        <option value="CIST">[CIST] Clipperton Island Standard Time UTC−08</option>
                                        <option value="CKT">[CKT] Cook Island Time UTC−10</option>
                                        <option value="CLST">[CLST] Chile Summer Time UTC−03</option>
                                        <option value="CLT">[CLT] Chile Standard Time UTC−04</option>
                                        <option value="COST">[COST] Colombia Summer Time UTC−04</option>
                                        <option value="COT">[COT] Colombia Time UTC−05</option>
                                        <option value="CST">[CST] Central Standard Time (North America) UTC−06</option>
                                        <option value="CST">[CST] China Standard Time UTC+08</option>
                                        <option value="CST">[CST] Cuba Standard Time UTC−05</option>
                                        <option value="CT">[CT] Central Time UTC−06/UTC−05</option>
                                        <option value="CVT">[CVT] Cape Verde Time UTC−01</option>
                                        <option value="CWST">[CWST] Central Western Standard Time (Australia) unofficial UTC+08:45</option>
                                        <option value="CXT">[CXT] Christmas Island Time UTC+07</option>
                                        <option value="DAVT">[DAVT] Davis Time UTC+07</option>
                                        <option value="DDUT">[DDUT] Dumont d'Urville Time UTC+10</option>
                                        <option value="DFT">[DFT] AIX-specific equivalent of Central European Time[NB 1] UTC+01</option>
                                        <option value="EASST">[EASST] Easter Island Summer Time UTC−05</option>
                                        <option value="EAST">[EAST] Easter Island Standard Time UTC−06</option>
                                        <option value="EAT">[EAT] East Africa Time UTC+03</option>
                                        <option value="ECT">[ECT] Eastern Caribbean Time  UTC−04</option>
                                        <option value="ECT">[ECT] Ecuador Time UTC−05</option>
                                        <option value="EDT">[EDT] Eastern Daylight Time (North America) UTC−04</option>
                                        <option value="EEST">[EEST] Eastern European Summer Time UTC+03</option>
                                        <option value="EET">[EET] Eastern European Time UTC+02</option>
                                        <option value="EGST">[EGST] Eastern Greenland Summer Time UTC±00</option>
                                        <option value="EGT">[EGT] Eastern Greenland Time UTC−01</option>
                                        <option value="EST">[EST] Eastern Standard Time (North America) UTC−05</option>
                                        <option value="ET">[ET] Eastern Time (North America) UTC−05 / UTC−04</option>
                                        <option value="FET">[FET] Further-eastern European Time UTC+03</option>
                                        <option value="FJT">[FJT] Fiji Time UTC+12</option>
                                        <option value="FKST">[FKST] Falkland Islands Summer Time UTC−03</option>
                                        <option value="FKT">[FKT] Falkland Islands Time UTC−04</option>
                                        <option value="FNT">[FNT] Fernando de Noronha Time UTC−02</option>
                                        <option value="GALT">[GALT] Galápagos Time UTC−06</option>
                                        <option value="GAMT">[GAMT] Gambier Islands Time UTC−09</option>
                                        <option value="GET">[GET] Georgia Standard Time UTC+04</option>
                                        <option value="GFT">[GFT] French Guiana Time UTC−03</option>
                                        <option value="GILT">[GILT] Gilbert Island Time UTC+12</option>
                                        <option value="GIT">[GIT] Gambier Island Time UTC−09</option>
                                        <option value="GMT">[GMT] Greenwich Mean Time UTC±00</option>
                                        <option value="GST">[GST] South Georgia and the South Sandwich Islands Time UTC−02</option>
                                        <option value="GST">[GST] Gulf Standard Time UTC+04</option>
                                        <option value="GYT">[GYT] Guyana Time UTC−04</option>
                                        <option value="HDT">[HDT] Hawaii–Aleutian Daylight Time UTC−09</option>
                                        <option value="HAEC">[HAEC] Heure Avancée d'Europe Centrale French-language name for CEST UTC+02</option>
                                        <option value="HST">[HST] Hawaii–Aleutian Standard Time UTC−10</option>
                                        <option value="HKT">[HKT] Hong Kong Time UTC+08</option>
                                        <option value="HMT">[HMT] Heard and McDonald Islands Time UTC+05</option>
                                        <option value="HOVST">[HOVST] Hovd Summer Time (not used from 2017-present) UTC+08</option>
                                        <option value="HOVT">[HOVT] Hovd Time UTC+07</option>
                                        <option value="ICT">[ICT] Indochina Time UTC+07</option>
                                        <option value="IDLW">[IDLW] International Day Line West time zone UTC−12</option>
                                        <option value="IDT">[IDT] Israel Daylight Time UTC+03</option>
                                        <option value="IOT">[IOT] Indian Ocean Time UTC+03</option>
                                        <option value="IRDT">[IRDT] Iran Daylight Time UTC+04:30</option>
                                        <option value="IRKT">[IRKT] Irkutsk Time UTC+08</option>
                                        <option value="IRST">[IRST] Iran Standard Time UTC+03:30</option>
                                        <option value="IST">[IST] Indian Standard Time UTC+05:30</option>
                                        <option value="IST">[IST] Irish Standard Time[8] UTC+01</option>
                                        <option value="IST">[IST] Israel Standard Time UTC+02</option>
                                        <option value="JST">[JST] Japan Standard Time UTC+09</option>
                                        <option value="KALT">[KALT] Kaliningrad Time UTC+02</option>
                                        <option value="KGT">[KGT] Kyrgyzstan Time UTC+06</option>
                                        <option value="KOST">[KOST] Kosrae Time UTC+11</option>
                                        <option value="KRAT">[KRAT] Krasnoyarsk Time UTC+07</option>
                                        <option value="KST">[KST] Korea Standard Time UTC+09</option>
                                        <option value="LHST">[LHST] Lord Howe Standard Time UTC+10:30</option>
                                        <option value="LHST">[LHST] Lord Howe Summer Time UTC+11</option>
                                        <option value="LINT">[LINT] Line Islands Time UTC+14</option>
                                        <option value="MAGT">[MAGT] Magadan Time UTC+12</option>
                                        <option value="MART">[MART] Marquesas Islands Time UTC−09:30</option>
                                        <option value="MAWT">[MAWT] Mawson Station Time UTC+05</option>
                                        <option value="MDT">[MDT] Mountain Daylight Time (North America) UTC−06</option>
                                        <option value="MET">[MET] Middle European Time (same zone as CET) UTC+01</option>
                                        <option value="MEST">[MEST] Middle European Summer Time (same zone as CEST) UTC+02</option>
                                        <option value="MHT">[MHT] Marshall Islands Time UTC+12</option>
                                        <option value="MIST">[MIST] Macquarie Island Station Time UTC+11</option>
                                        <option value="MIT">[MIT] Marquesas Islands Time UTC−09:30</option>
                                        <option value="MMT">[MMT] Myanmar Standard Time UTC+06:30</option>
                                        <option value="MSK">[MSK] Moscow Time UTC+03</option>
                                        <option value="MST">[MST] Malaysia Standard Time UTC+08</option>
                                        <option value="MST">[MST] Mountain Standard Time (North America) UTC−07</option>
                                        <option value="MUT">[MUT] Mauritius Time UTC+04</option>
                                        <option value="MVT">[MVT] Maldives Time UTC+05</option>
                                        <option value="MYT">[MYT] Malaysia Time UTC+08</option>
                                        <option value="NCT">[NCT] New Caledonia Time UTC+11</option>
                                        <option value="NDT">[NDT] Newfoundland Daylight Time UTC−02:30</option>
                                        <option value="NFT">[NFT] Norfolk Island Time UTC+11</option>
                                        <option value="NOVT">[NOVT] Novosibirsk Time [9] UTC+07</option>
                                        <option value="NPT">[NPT] Nepal Time UTC+05:45</option>
                                        <option value="NST">[NST] Newfoundland Standard Time UTC−03:30</option>
                                        <option value="NT">[NT] Newfoundland Time UTC−03:30</option>
                                        <option value="NUT">[NUT] Niue Time UTC−11</option>
                                        <option value="NZDT">[NZDT] New Zealand Daylight Time UTC+13</option>
                                        <option value="NZST">[NZST] New Zealand Standard Time UTC+12</option>
                                        <option value="OMST">[OMST] Omsk Time UTC+06</option>
                                        <option value="ORAT">[ORAT] Oral Time UTC+05</option>
                                        <option value="PDT">[PDT] Pacific Daylight Time (North America) UTC−07</option>
                                        <option value="PET">[PET] Peru Time UTC−05</option>
                                        <option value="PETT">[PETT] Kamchatka Time UTC+12</option>
                                        <option value="PGT">[PGT] Papua New Guinea Time UTC+10</option>
                                        <option value="PHOT">[PHOT] Phoenix Island Time UTC+13</option>
                                        <option value="PHT">[PHT] Philippine Time UTC+08</option>
                                        <option value="PHST">[PHST] Philippine Standard Time UTC+08</option>
                                        <option value="PKT">[PKT] Pakistan Standard Time UTC+05</option>
                                        <option value="PMDT">[PMDT] Saint Pierre and Miquelon Daylight Time UTC−02</option>
                                        <option value="PMST">[PMST] Saint Pierre and Miquelon Standard Time UTC−03</option>
                                        <option value="PONT">[PONT] Pohnpei Standard Time UTC+11</option>
                                        <option value="PST">[PST] Pacific Standard Time (North America) UTC−08</option>
                                        <option value="PWT">[PWT] Palau Time[10] UTC+09</option>
                                        <option value="PYST">[PYST] Paraguay Summer Time[11] UTC−03</option>
                                        <option value="PYT">[PYT] Paraguay Time[12] UTC−04</option>
                                        <option value="RET">[RET] Réunion Time UTC+04</option>
                                        <option value="ROTT">[ROTT] Rothera Research Station Time UTC−03</option>
                                        <option value="SAKT">[SAKT] Sakhalin Island Time UTC+11</option>
                                        <option value="SAMT">[SAMT] Samara Time UTC+04</option>
                                        <option value="SAST">[SAST] South African Standard Time UTC+02</option>
                                        <option value="SBT">[SBT] Solomon Islands Time UTC+11</option>
                                        <option value="SCT">[SCT] Seychelles Time UTC+04</option>
                                        <option value="SDT">[SDT] Samoa Daylight Time UTC−10</option>
                                        <option value="SGT">[SGT] Singapore Time UTC+08</option>
                                        <option value="SLST">[SLST] Sri Lanka Standard Time UTC+05:30</option>
                                        <option value="SRET">[SRET] Srednekolymsk Time UTC+11</option>
                                        <option value="SRT">[SRT] Suriname Time UTC−03</option>
                                        <option value="SST">[SST] Samoa Standard Time UTC−11</option>
                                        <option value="SST">[SST] Singapore Standard Time UTC+08</option>
                                        <option value="SYOT">[SYOT] Showa Station Time UTC+03</option>
                                        <option value="TAHT">[TAHT] Tahiti Time UTC−10</option>
                                        <option value="THA">[THA] Thailand Standard Time UTC+07</option>
                                        <option value="TFT">[TFT] French Southern and Antarctic Time[13] UTC+05</option>
                                        <option value="TJT">[TJT] Tajikistan Time UTC+05</option>
                                        <option value="TKT">[TKT] Tokelau Time UTC+13</option>
                                        <option value="TLT">[TLT] Timor Leste Time UTC+09</option>
                                        <option value="TMT">[TMT] Turkmenistan Time UTC+05</option>
                                        <option value="TRT">[TRT] Turkey Time UTC+03</option>
                                        <option value="TOT">[TOT] Tonga Time UTC+13</option>
                                        <option value="TVT">[TVT] Tuvalu Time UTC+12</option>
                                        <option value="ULAST">[ULAST] Ulaanbaatar Summer Time UTC+09</option>
                                        <option value="ULAT">[ULAT] Ulaanbaatar Standard Time UTC+08</option>
                                        <option value="UTC">[UTC] Coordinated Universal Time UTC±00</option>
                                        <option value="UYST">[UYST] Uruguay Summer Time UTC−02</option>
                                        <option value="UYT">[UYT] Uruguay Standard Time UTC−03</option>
                                        <option value="UZT">[UZT] Uzbekistan Time UTC+05</option>
                                        <option value="VET">[VET] Venezuelan Standard Time UTC−04</option>
                                        <option value="VLAT">[VLAT] Vladivostok Time UTC+10</option>
                                        <option value="VOLT">[VOLT] Volgograd Time UTC+03</option>
                                        <option value="VOST">[VOST] Vostok Station Time UTC+06</option>
                                        <option value="VUT">[VUT] Vanuatu Time UTC+11</option>
                                        <option value="WAKT">[WAKT] Wake Island Time UTC+12</option>
                                        <option value="WAST">[WAST] West Africa Summer Time UTC+02</option>
                                        <option value="WAT">[WAT] West Africa Time UTC+01</option>
                                        <option value="WEST">[WEST] Western European Summer Time UTC+01</option>
                                        <option value="WET">[WET] Western European Time UTC±00</option>
                                        <option value="WIB">[WIB] Western Indonesian Time UTC+07</option>
                                        <option value="WIT">[WIT] Eastern Indonesian Time UTC+09</option>
                                        <option value="WITA">[WITA] Central Indonesia Time UTC+08</option>
                                        <option value="WGST">[WGST] West Greenland Summer Time[14] UTC−02</option>
                                        <option value="WGT">[WGT] West Greenland Time[15] UTC−03</option>
                                        <option value="WST">[WST] Western Standard Time UTC+08</option>
                                        <option value="YAKT">[YAKT] Yakutsk Time UTC+09</option>
                                        <option value="YEKT">[YEKT] Yekaterinburg Time UTC+05</option>
                                    </select>

The class tom-select has the following jQuery selector:

    $(".tom-select").each(function () {
        let options = {
            plugins: {
                dropdown_input: {},
            },
        };

        if ($(this).attr("multiple") !== undefined) {
            options = {
                ...options,
                plugins: {
                    ...options.plugins,
                    remove_button: {
                        title: "Remove this item",
                    },
                },
                persist: false,
                create: true,
                onDelete: function (values) {
                    return confirm(
                        values.length > 1
                            ? "Are you sure you want to remove these " +
                                  values.length +
                                  " items?"
                            : 'Are you sure you want to remove "' +
                                  values[0] +
                                  '"?'
                    );
                },
            };
        }

        new TomSelect(this, options);
    });

Expected behavior It should auto-complete till finding the right option

Additional context Add any other context about the problem here.

github-actions[bot] commented 1 year ago

This issue has not been active in 120 days and has been marked "stale". Remove stale label or comment or this will be closed in 15 days