Skip to main content

Search and Top Navigation

#7718 closed feature (fixed)

Opened September 14, 2011 04:42PM UTC

Closed September 14, 2011 04:52PM UTC

instantiating widget with option of type array

Reported by: sgruenholz Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.widget Version: 1.8.16
Keywords: Cc:
Blocked by: Blocking:

I get an unexpected behavior when initializing a widget with an option of type array.


In a simple color picker we use an array of hex values. These define the default color swatches for the color picker.

$.widget("some.simple_color_picker", {
      // default color swatches
      options: { 
            colors: ['#000','#333','#666','#bbb','#ddd','#fff']
      _create: function() {
            console.log("options.colors", this.options.colors);


When instantiating a color picker instance, I can then define my own custom set of color swatches to use for each one.

$('#some_elem').simple_color_picker({ colors: ['#FF0000', '#00FF00', '#0000FF'] });

But instead of replacing the default colors array with the new one (the expected behavior), it combines them. Logging the value of this.options.colors on _init() reveals:

['#FF0000', '#00FF00', '#0000FF', '#bbb', '#ddd', '#fff']

When options gets extended, it's treating our arrays like hashes and replacing values by index:

// default
{ 0: '#000', 1: '#333', 2: '#666', 3: '#bbb', 4: '#ddd', 5: '#fff' }

// instance
{ 0: '#FF0000', 1: '#00FF00', 2: '#0000FF' }

// extending these objects produces:
{ 0: '#FF0000', 1: '#00FF00', 2: '#0000FF', 3: '#bbb', 4: '#ddd', 5: '#fff' }


I've got a workaround where I use "options.default_colors" in the class and then instantiate with "options.colors", checking if the latter exists and using it instead.

Or alternately we could use something like a delimited string of values and then parse them out...

But, bottom line is the widget class exists to handle this for us in a friendly way.


Please consider "fixing" options to handle values of type array in the expected manner when a widget gets instantiated. Maybe this needs to get pushed up to the core method .extends() where the deep nesting stuff is happening...

Attachments (0)
Change History (1)

Changed September 14, 2011 04:52PM UTC by scottgonzalez comment:1

resolution: → fixed
status: newclosed

This works properly in master. Probably from b9153258b0f0edbff49496ed16d2aa93bec07d95.