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.61k stars 120 forks source link

RESULT_CODE_HUNG with a list of around 300 items #533

Closed orasik closed 9 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 10 months 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