Bug #16603 :: Hierselect element options order broken in Google Chrome

Package home | Report new bug | New search | Development Roadmap

Status: Open | Feedback | All | Closed Since Version 3.2.16

Bug #16603	Hierselect element options order broken in Google Chrome
Submitted:	2009-09-12 15:36 UTC
From:	mpgjunky	Assigned:	avb
Status:	Closed	Package:	HTML_QuickForm (version 3.2.11)
PHP Version:	Irrelevant	OS:	Fedora
Roadmaps:	(Not assigned)
Subscription	Your email:

Comments Add Comment Add patch

Anyone can comment on a bug. Have a simpler test case? Does it work for you on a different platform? Let us know! Just going to say 'Me too!'? Don't clutter the database with that please !

Your email address: MUST BE VALID
Solve the problem : 3 + 18 = ?

[2009-09-12 15:36 UTC] mpgjunky (Michael Mussulis)

Description:
------------
The "child" select box options do not show in the order they were 
retrieved in, i.e. ascending. It's fine in Firefox and IE, but fails in 
Google Chrome.

I suspect it's the Javascript function for swapping options but am 
not 100% certain.

Test script:
---------------
- Create Quickform with hierselect element.
- Configure two arrays for the options, both sorted ascending. My options are retrieved from mysql table, e.g.: "SELECT * FROM usa_cities order by city asc"
- View form in Chrome
- Select a parent option
- Click on the child select - all cities will be shown in unsorted order

Expected result:
----------------
Child options to be shown in the exact order they were retrieved.

Actual result:
--------------
Child options shown in unsorted order.

Comments

[2009-09-12 20:37 UTC] avb (Alexey Borzov)

-Status: Open
+Status: Feedback
Please provide a self-contained example that can actually be run. We obviously don't have access to your 'usa_cities' mysql table. Thanks.

[2009-09-12 23:17 UTC] mpgjunky (Michael Mussulis)

Dear Alexey,

As requested, an example. I can send you screenshots as if you wish, in FF and 
Chrome.

Thanks,
Michael.

<?php
require_once 'HTML/QuickForm.php';
$form = new HTML_QuickForm('frmcaddrrep', "get");

$states[0] = "Alaska";
$states[1] = "California";

$cities[0][104]="Anchorage";
$cities[0][105]="Barrow";
$cities[0][106]="Bethel";
$cities[0][107]="Cordova";
$cities[0][108]="Dillingham";
$cities[0][109]="Eagle River";
$cities[0][110]="Fairbanks";
$cities[0][111]="Fort Wainwright";
$cities[0][112]="Haines";
$cities[0][113]="Homer";
$cities[0][114]="Juneau";
$cities[0][115]="Kenai";
$cities[0][116]="Ketchikan";
$cities[0][117]="Kodiak";
$cities[0][118]="Kotzebue";
$cities[0][119]="Nome";
$cities[0][120]="North Pole";
$cities[0][121]="Palmer";
$cities[0][122]="Petersburg";
$cities[0][123]="Seward";
$cities[0][124]="Sitka";
$cities[0][125]="Skagway";
$cities[0][126]="Soldotna";
$cities[0][127]="Unalaska";
$cities[0][128]="Valdez";
$cities[0][129]="Wasilla";
$cities[0][130]="Wrangell";

$cities[1][277]="Agoura Hills";
$cities[1][278]="Alameda";
$cities[1][279]="Alamo";
$cities[1][280]="Albany";
$cities[1][281]="Alhambra";
$cities[1][282]="Aliso Viejo";
$cities[1][283]="Alpine";
$cities[1][284]="Altadena";
$cities[1][285]="Alturas";
$cities[1][286]="Anaheim";
$cities[1][287]="Anderson";
$cities[1][288]="Angels Camp";
$cities[1][289]="Antioch";
$cities[1][290]="Apple Valley";
$cities[1][291]="Aptos";
$cities[1][292]="Arcadia";
$cities[1][293]="Arcata";
$cities[1][294]="Arnold";
$cities[1][295]="Arroyo Grande";
$cities[1][296]="Artesia";
$cities[1][297]="Atascadero";
$cities[1][298]="Atwater";
$cities[1][299]="Auburn";
$cities[1][300]="Avalon";
$cities[1][301]="Azusa";
$cities[1][302]="Bakersfield";
$cities[1][303]="Baldwin Park";
$cities[1][304]="Banning";
$cities[1][305]="Barstow";
$cities[1][306]="Beaumont";
$cities[1][307]="Bell";
$cities[1][308]="Bell Gardens";
$cities[1][309]="Bellflower";
$cities[1][310]="Belmont";
$cities[1][311]="Belvedere Tiburon";
$cities[1][312]="Benicia";
$cities[1][313]="Berkeley";
$cities[1][314]="Beverly Hills";
$cities[1][315]="Big Bear City";
$cities[1][316]="Big Bear Lake";
$cities[1][317]="Bishop";
$cities[1][318]="Bloomington";
$cities[1][319]="Blythe";
$cities[1][320]="Bonita";
$cities[1][321]="Boulder Creek";
$cities[1][322]="Brawley";
$cities[1][323]="Brea";
$cities[1][324]="Brentwood";
$cities[1][325]="Brisbane";
$cities[1][326]="Buellton";
$cities[1][327]="Buena Park";
$cities[1][328]="Burbank";
$cities[1][329]="Burlingame";
$cities[1][330]="Calabasas";
$cities[1][331]="Calexico";
$cities[1][332]="Calistoga";
$cities[1][333]="Camarillo";
$cities[1][334]="Cambria";
$cities[1][335]="Campbell";
$cities[1][336]="Canoga Park";
$cities[1][337]="Canyon Country";
$cities[1][338]="Capitola";
$cities[1][339]="Carlsbad";
$cities[1][340]="Carmel";
$cities[1][341]="Carmel Valley";
$cities[1][342]="Carmichael";
$cities[1][343]="Carpinteria";
$cities[1][344]="Carson";
$cities[1][345]="Castro Valley";
$cities[1][346]="Castroville";
$cities[1][347]="Cathedral City";
$cities[1][348]="Ceres";
$cities[1][349]="Cerritos";
$cities[1][350]="Chatsworth";
$cities[1][351]="Chester";
$cities[1][352]="Chico";
$cities[1][353]="Chino";
$cities[1][354]="Chino Hills";
$cities[1][355]="Chowchilla";
$cities[1][356]="Chula Vista";
$cities[1][357]="Citrus Heights";
$cities[1][358]="City of Industry";
$cities[1][359]="Claremont";
$cities[1][360]="Clayton";
$cities[1][361]="Clearlake";
$cities[1][362]="Cloverdale";
$cities[1][363]="Clovis";
$cities[1][364]="Coachella";
$cities[1][365]="Coalinga";
$cities[1][366]="Colton";
$cities[1][367]="Colusa";
$cities[1][368]="Compton";
$cities[1][369]="Concord";
$cities[1][370]="Corning";
$cities[1][371]="Corona";
$cities[1][372]="Corona Del Mar";
$cities[1][373]="Coronado";
$cities[1][374]="Corte Madera";
$cities[1][375]="Costa Mesa";
$cities[1][376]="Cotati";
$cities[1][377]="Cottonwood";
$cities[1][378]="Covina";
$cities[1][379]="Crescent City";
$cities[1][380]="Crestline";
$cities[1][381]="Culver City";
$cities[1][382]="Cupertino";
$cities[1][383]="Cypress";
$cities[1][384]="Daly City";
$cities[1][385]="Dana Point";
$cities[1][386]="Danville";
$cities[1][387]="Davis";
$cities[1][388]="Del Mar";
$cities[1][389]="Delano";
$cities[1][390]="Desert Hot Springs";
$cities[1][391]="Diamond Bar";
$cities[1][392]="Dinuba";
$cities[1][393]="Dixon";
$cities[1][394]="Downey";
$cities[1][395]="Duarte";
$cities[1][396]="Dublin";
$cities[1][397]="El Cajon";
$cities[1][398]="El Centro";
$cities[1][399]="El Cerrito";
$cities[1][400]="El Dorado Hills";
$cities[1][401]="El Monte";
$cities[1][402]="El Segundo";
$cities[1][403]="El Sobrante";
$cities[1][404]="Elk Grove";
$cities[1][405]="Emeryville";
$cities[1][406]="Encinitas";
$cities[1][407]="Encino";
$cities[1][408]="Escalon";
$cities[1][409]="Escondido";
$cities[1][410]="Eureka";
$cities[1][411]="Exeter";
$cities[1][412]="Fair Oaks";
$cities[1][413]="Fairfax";
$cities[1][414]="Fairfield";
$cities[1][415]="Fallbrook";
$cities[1][416]="Felton";
$cities[1][417]="Fillmore";
$cities[1][418]="Folsom";
$cities[1][419]="Fontana";
$cities[1][420]="Fort Bragg";
$cities[1][421]="Fortuna";
$cities[1][422]="Fountain Valley";
$cities[1][423]="Fremont";
$cities[1][424]="Fresno";
$cities[1][425]="Fullerton";
$cities[1][426]="Galt";
$cities[1][427]="Garden Grove";
$cities[1][428]="Gardena";
$cities[1][429]="Gilroy";
$cities[1][430]="Glendale";
$cities[1][431]="Glendora";
$cities[1][432]="Goleta";
$cities[1][433]="Granada Hills";
$cities[1][434]="Grand Terrace";
$cities[1][435]="Granite Bay";
$cities[1][436]="Grass Valley";
$cities[1][437]="Greenbrae";
$cities[1][438]="Gridley";
$cities[1][439]="Grover Beach";
$cities[1][440]="Hacienda Heights";
$cities[1][441]="Half Moon Bay";
$cities[1][442]="Hanford";
$cities[1][443]="Harbor City";
$cities[1][444]="Hawaiian Gardens";
$cities[1][445]="Hawthorne";
$cities[1][446]="Hayward";
$cities[1][447]="Healdsburg";
$cities[1][448]="Hemet";
$cities[1][449]="Hermosa Beach";
$cities[1][450]="Hesperia";
$cities[1][451]="Highland";
$cities[1][452]="Hollister";
$cities[1][453]="Huntington Beach";
$cities[1][454]="Huntington Park";
$cities[1][455]="Imperial Beach";
$cities[1][456]="Indio";
$cities[1][457]="Inglewood";
$cities[1][458]="Irvine";
$cities[1][459]="Jackson";
$cities[1][460]="Kelseyville";
$cities[1][461]="Kerman";
$cities[1][462]="King City";
$cities[1][463]="Kings Beach";
$cities[1][464]="Kingsburg";
$cities[1][465]="La Canada Flintridge";
$cities[1][466]="La Crescenta";
$cities[1][467]="La Habra";
$cities[1][468]="La Jolla";
$cities[1][469]="La Mesa";
$cities[1][470]="La Mirada";
$cities[1][471]="La Palma";
$cities[1][472]="La Puente";
$cities[1][473]="La Quinta";
$cities[1][474]="La Verne";
$cities[1][475]="Lafayette";
$cities[1][476]="Laguna Beach";
$cities[1][477]="Laguna Hills";
$cities[1][478]="Laguna Niguel";
$cities[1][479]="Lake Arrowhead";
$cities[1][480]="Lake Elsinore";
$cities[1][481]="Lake Forest";
$cities[1][482]="Lake Isabella";
$cities[1][483]="Lakeport";
$cities[1][484]="Lakeside";
$cities[1][485]="Lakewood";
$cities[1][486]="Lancaster";
$cities[1][487]="Larkspur";
$cities[1][488]="Lawndale";
$cities[1][489]="Lemon Grove";
$cities[1][490]="Lemoore";
$cities[1][491]="Lincoln";
$cities[1][492]="Lindsay";
$cities[1][493]="Livermore";
$cities[1][494]="Lodi";
$cities[1][495]="Loma Linda";
$cities[1][496]="Lomita";
$cities[1][497]="Lompoc";
$cities[1][498]="Long Beach";
$cities[1][499]="Loomis";
$cities[1][500]="Los Alamitos";
$cities[1][501]="Los Altos";
$cities[1][502]="Los Angeles";
$cities[1][503]="Los Banos";
$cities[1][504]="Los Gatos";
$cities[1][505]="Los Osos";
$cities[1][506]="Lower Lake";
$cities[1][507]="Lynwood";
$cities[1][508]="Madera";
$cities[1][509]="Malibu";
$cities[1][510]="Mammoth Lakes";
$cities[1][511]="Manhattan Beach";
$cities[1][512]="Manteca";
$cities[1][513]="Marina";
$cities[1][514]="Marina Del Rey";
$cities[1][515]="Mariposa";
$cities[1][516]="Martinez";
$cities[1][517]="Marysville";
$cities[1][518]="Maywood";
$cities[1][519]="McKinleyville";
$cities[1][520]="Mendocino";
$cities[1][521]="Menlo Park";
$cities[1][522]="Merced";
$cities[1][523]="Middletown";
$cities[1][524]="Mill Valley";
$cities[1][525]="Millbrae";
$cities[1][526]="Milpitas";
$cities[1][527]="Mira Loma";
$cities[1][528]="Mission Hills";
$cities[1][529]="Mission Viejo";
$cities[1][530]="Modesto";
$cities[1][531]="Monrovia";
$cities[1][532]="Montclair";
$cities[1][533]="Montebello";
$cities[1][534]="Monterey";
$cities[1][535]="Monterey Park";
$cities[1][536]="Montrose";
$cities[1][537]="Moorpark";
$cities[1][538]="Moraga";
$cities[1][539]="Moreno Valley";
$cities[1][540]="Morgan Hill";
$cities[1][541]="Morro Bay";
$cities[1][542]="Mount Shasta";
$cities[1][543]="Mountain View";
$cities[1][544]="Murrieta";
$cities[1][545]="Napa";
$cities[1][546]="National City";
$cities[1][547]="Needles";
$cities[1][548]="Nevada City";
$cities[1][549]="Newark";
$cities[1][550]="Newbury Park";
$cities[1][551]="Newhall";
$cities[1][552]="Newport Beach";
$cities[1][553]="Nipomo";
$cities[1][554]="Norco";
$cities[1][555]="North Highlands";
$cities[1][556]="North Hills";
$cities[1][557]="North Hollywood";
$cities[1][558]="Northridge";
$cities[1][559]="Norwalk";
$cities[1][560]="Novato";
$cities[1][561]="Oakdale";
$cities[1][562]="Oakhurst";
$cities[1][563]="Oakland";
$cities[1][564]="Oakley";
$cities[1][565]="Oceanside";
$cities[1][566]="Ojai";
$cities[1][567]="Ontario";
$cities[1][568]="Orange";
$cities[1][569]="Orangevale";
$cities[1][570]="Orinda";
$cities[1][571]="Orland";
$cities[1][572]="Oroville";
$cities[1][6264]="Other";
$cities[1][573]="Oxnard";
$cities[1][574]="Pacific Grove";
$cities[1][575]="Pacific Palisades";
$cities[1][576]="Pacifica";
$cities[1][577]="Pacoima";
$cities[1][578]="Palm Desert";
$cities[1][579]="Palm Springs";
$cities[1][580]="Palmdale";
$cities[1][581]="Palo Alto";
$cities[1][582]="Palos Verdes Peninsu";
$cities[1][583]="Panorama City";
$cities[1][584]="Paradise";
$cities[1][585]="Paramount";
$cities[1][586]="Pasadena";
$cities[1][587]="Paso Robles";
$cities[1][588]="Patterson";
$cities[1][589]="Penn Valley";
$cities[1][590]="Perris";
$cities[1][591]="Petaluma";
$cities[1][592]="Pico Rivera";
$cities[1][593]="Pinole";
$cities[1][594]="Pismo Beach";
$cities[1][595]="Pittsburg";
$cities[1][596]="Placentia";
$cities[1][597]="Placerville";
$cities[1][598]="Playa Del Rey";
$cities[1][599]="Pleasant Hill";
$cities[1][600]="Pleasanton";
$cities[1][601]="Pomona";
$cities[1][602]="Port Hueneme";
$cities[1][603]="Porterville";
$cities[1][604]="Poway";
$cities[1][605]="Quincy";
$cities[1][606]="Ramona";
$cities[1][607]="Rancho Cordova";
$cities[1][608]="Rancho Cucamonga";
$cities[1][609]="Rancho Mirage";
$cities[1][610]="Rancho Palos Verdes";
$cities[1][611]="Rancho Santa Fe";
$cities[1][612]="Rancho Santa Margari";
$cities[1][613]="Red Bluff";
$cities[1][614]="Redding";
$cities[1][615]="Redlands";
$cities[1][616]="Redondo Beach";
$cities[1][617]="Redwood City";
$cities[1][618]="Reedley";
$cities[1][619]="Reseda";
$cities[1][620]="Rialto";
$cities[1][621]="Richmond";
$cities[1][622]="Ridgecrest";
$cities[1][623]="Rio Linda";
$cities[1][624]="Rio Vista";
$cities[1][625]="Ripon";
$cities[1][626]="Riverbank";
$cities[1][627]="Riverside";
$cities[1][628]="Rocklin";
$cities[1][629]="Rohnert Park";
$cities[1][630]="Rosemead";
$cities[1][631]="Roseville";
$cities[1][632]="Rowland Heights";
$cities[1][633]="Running Springs";
$cities[1][634]="Sacramento";
$cities[1][635]="Saint Helena";
$cities[1][636]="Salinas";
$cities[1][637]="San Andreas";
$cities[1][638]="San Anselmo";
$cities[1][639]="San Bernardino";
$cities[1][640]="San Bruno";
$cities[1][641]="San Carlos";
$cities[1][642]="San Clemente";
$cities[1][643]="San Diego";
$cities[1][644]="San Dimas";
$cities[1][645]="San Fernando";
$cities[1][646]="San Francisco";
$cities[1][647]="San Gabriel";
$cities[1][648]="San Jacinto";
$cities[1][649]="San Jose";
$cities[1][650]="San Juan Capistrano";
$cities[1][651]="San Leandro";
$cities[1][652]="San Lorenzo";
$cities[1][653]="San Luis Obispo";
$cities[1][654]="San Marcos";
$cities[1][655]="San Marino";
$cities[1][656]="San Mateo";
$cities[1][657]="San Pablo";
$cities[1][658]="San Pedro";
$cities[1][659]="San Rafael";
$cities[1][660]="San Ramon";
$cities[1][661]="Sanger";
$cities[1][662]="Santa Ana";
$cities[1][663]="Santa Barbara";
$cities[1][664]="Santa Clara";
$cities[1][665]="Santa Clarita";
$cities[1][666]="Santa Cruz";
$cities[1][667]="Santa Fe Springs";
$cities[1][668]="Santa Maria";
$cities[1][669]="Santa Monica";
$cities[1][670]="Santa Paula";
$cities[1][671]="Santa Rosa";
$cities[1][672]="Santa Ynez";
$cities[1][673]="Santee";
$cities[1][674]="Saratoga";
$cities[1][675]="Sausalito";
$cities[1][676]="Scotts Valley";
$cities[1][677]="Seal Beach";
$cities[1][678]="Seaside";
$cities[1][679]="Sebastopol";
$cities[1][680]="Selma";
$cities[1][681]="Shafter";
$cities[1][682]="Sherman Oaks";
$cities[1][683]="Shingle Springs";
$cities[1][684]="Sierra Madre";
$cities[1][685]="Simi Valley";
$cities[1][686]="Solana Beach";
$cities[1][687]="Solvang";
$cities[1][688]="Sonoma";
$cities[1][689]="Sonora";
$cities[1][690]="Soquel";
$cities[1][691]="South El Monte";
$cities[1][692]="South Gate";
$cities[1][693]="South Lake Tahoe";
$cities[1][694]="South Pasadena";
$cities[1][695]="South San Francisco";
$cities[1][696]="Spring Valley";
$cities[1][697]="Stanton";
$cities[1][698]="Stockton";
$cities[1][699]="Studio City";
$cities[1][700]="Suisun City";
$cities[1][701]="Sun City";
$cities[1][702]="Sun Valley";
$cities[1][703]="Sunland";
$cities[1][704]="Sunnyvale";
$cities[1][705]="Susanville";
$cities[1][706]="Sutter Creek";
$cities[1][707]="Sylmar";
$cities[1][708]="Taft";
$cities[1][709]="Tahoe City";
$cities[1][710]="Tarzana";
$cities[1][711]="Tehachapi";
$cities[1][712]="Temecula";
$cities[1][713]="Temple City";
$cities[1][714]="Templeton";
$cities[1][715]="Thousand Oaks";
$cities[1][716]="Torrance";
$cities[1][717]="Trabuco Canyon";
$cities[1][718]="Tracy";
$cities[1][719]="Truckee";
$cities[1][720]="Tujunga";
$cities[1][721]="Tulare";
$cities[1][722]="Turlock";
$cities[1][723]="Tustin";
$cities[1][724]="Twentynine Palms";
$cities[1][725]="Ukiah";
$cities[1][726]="Union City";
$cities[1][727]="Upland";
$cities[1][728]="Vacaville";
$cities[1][729]="Valencia";
$cities[1][730]="Vallejo";
$cities[1][731]="Valley Center";
$cities[1][732]="Valley Springs";
$cities[1][733]="Valley Village";
$cities[1][734]="Van Nuys";
$cities[1][735]="Venice";
$cities[1][736]="Ventura";
$cities[1][737]="Victorville";
$cities[1][738]="Visalia";
$cities[1][739]="Vista";
$cities[1][740]="Walnut";
$cities[1][741]="Walnut Creek";
$cities[1][742]="Wasco";
$cities[1][743]="Watsonville";
$cities[1][744]="Weaverville";
$cities[1][745]="Weed";
$cities[1][746]="West Covina";
$cities[1][747]="West Hills";
$cities[1][748]="West Hollywood";
$cities[1][749]="West Sacramento";
$cities[1][750]="Westlake Village";
$cities[1][751]="Westminster";
$cities[1][752]="Whittier";
$cities[1][753]="Wildomar";
$cities[1][754]="Willits";
$cities[1][755]="Willows";
$cities[1][756]="Wilmington";
$cities[1][757]="Windsor";
$cities[1][758]="Woodland";
$cities[1][759]="Woodland Hills";
$cities[1][760]="Yorba Linda";
$cities[1][761]="Yountville";
$cities[1][762]="Yreka";
$cities[1][763]="Yuba City";
$cities[1][764]="Yucaipa";
$cities[1][765]="Yucca Valley";

$sel =& $form->addElement('hierselect', 'statecity', 'Choose State/City:');
$sel->setOptions(array($states, $cities));

$form->display();

?>

[2009-09-12 23:19 UTC] mpgjunky (Michael Mussulis)

Alexey,

When running the example, Alaska cities will show in correct order, whilst California cities will show unordered.

Thanks,
Michael.

[2009-09-12 23:51 UTC] avb (Alexey Borzov)

-Status: Feedback
+Status: Verified
Thanks, reproduced the problem.

[2009-09-14 17:09 UTC] avb (Alexey Borzov)

-Status: Verified
+Status: Analyzed
Looks like Chrome can iterate over object's properties with 'for in' loop in a random order. Also looks like that this behaviour conforms to Javascript spec, but not to the behaviour of other major browsers... 

We probably need to rewrite some of the JS code for hierselect, getting rid of 'for in' loop.

References:
http://ejohn.org/blog/javascript-in-chrome/http://stackoverflow.com/questions/640745/google-chrome-javascript-associative-arrays-evaluated-out-of-sequence

[2009-09-14 17:14 UTC] mpgjunky (Michael Mussulis)

Alexey,

Thanks for the explanation, good to know.

Regards,
Michael.

[2010-09-22 23:57 UTC] avb (Alexey Borzov)

NB: committed an implementation of Hierselect element for QuickForm2, this bug is fixed there. Now we just have to backport the fixes...

[2010-10-17 12:35 UTC] avb (Alexey Borzov)

-Status:      Analyzed
+Status:      Closed
-Assigned To:
+Assigned To: avb
Fixed in release 3.2.12, though recent Chrome versions do not exhibit this behaviour, so the fix isn't terribly needed...