@domoinc/domo-select/README.md

DomoSelect - Domo Widget

# DomoSelect





## Configuration Options


#### buttonIcon
Type: `d3 selection`  
Default: `null`  

d3 selection of the element for the button icon

#### centerText
Type: `select`  
Default: `{"name":"Left","value":false}`  

Set the text position

#### chartName
Type: `string`  
Default: `"Dropdown"`  

Name of chart for reporting

#### color
Type: `string`  
Default: `"lightGrey"`  

Color of the dropdown button

#### disabled
Type: `boolean`  
Default: `false`  

Disables the dropdown

#### domoScroll
Type: `boolean`  
Default: `true`  

Hides the scroll bar to the right of the dropdown

#### dropdownLocation
Type: `string`  
Default: `"bottom"`  

Direction that the dropdown extends from

#### height
Type: `string`  
Default: `"250px"`  

Height of the select

#### initialIndex
Type: `number`  
Default: `0`  

Sets the default option to show on the select bar (the number corresponds to the options' order number in the dropdown)

#### isOnMobile
Type: `boolean`  
Default: `false`  

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

#### listIconFunction
Type: `function`  
Default: `"function () {}"`  

Function to run on each dropdown list item for icons.

#### listIconPadding
Type: `number`  
Default: `0`  

Left padding on the dropdown

#### marginBottom
Type: `string`  
Default: `"0px"`  

Margin Bottom

#### orientation
Type: `string`  
Default: `"horizontal"`  

Orientation of the button

#### popoutHeight
Type: `number`  
Default: `"250px"`  

Height of the dropdown when opened

#### shouldValidate
Type: `boolean`  
Default: `true`  

Flag for turning off data validation

#### size
Type: `string`  
Default: `"small"`  

Size of the button and the dropdown

#### staticValue
Type: `string`  
Default: `null`  

Sets a static default value on the select

#### updateSizeableConfigs
Type: `boolean`  
Default: `true`  

Flag for turning off the mimic of illustrator's scale functionality

#### width
Type: `number`  
Default: `250`  
Units: `px`

Width of the widget

## Data Definition


#### Label
Type: `string`

Default validate:  
```js
function (d) { return this.accessor(d) !== 'undefined';}
```

Default accessor:  
```js
function (line) { return String(line[0]); }
```

#### Value
Type: `string`

Default validate:  
```js
function (d) { return this.accessor(d) !== 'undefined';}
```

Default accessor:  
```js
function (line) { return String(line[1]); }
```

## Events


#### Dispatch Events

dispatch:click  
dispatch:focusout  
dispatch:blur  
dispatch:selection  
#### External Events


## Example

```js  
var sampleData = [
    ['All', null],
    ['North', 'North'],
    ['East', 'East'],
    ['South', 'South'],
    ['West', 'West'],
  ];

var chart = d3.select("#vis")
    .style({
        width: '500px',
        height: '500px'
    })
    .append('div')
    .style({
        position: 'absolute',
        top: '225px',
        left: '125px',
        width: '250px'
    })
    .chart('DomoSelect')
    .c({
        width: 250,
    });

chart.draw(sampleData);

setTimeout(function () {
  chart.button.trigger('dispatch:click', sampleData[0]);
}, 1000);

setTimeout(function () {
  chart.dropdown.trigger('click', sampleData[1]);
}, 2000);

setTimeout(function () {
  chart.button.trigger('dispatch:click', sampleData[0]);
}, 3000);
```