behavior: popup-selector

Similar to <select type=“dropdown-select”> but uses popup menu instead of list of options.

The popup-selector allows to share single list of items among many elements that have this behavior.

Use popup-selector instead of <select> when you need to switch state of repeatable items, e.g. in rows of some table/grid.

that have this behavior applied by default (see master_style_sheet):

• button[type=“selector”]

that this behavior knows about:

• menu=“css-selector” - CSS selector of menu element, example: <div menu=“popup.list-of-options”>…</div>
• value=“string” - initial and current value. Menu items (<li>s) may have value attribute declared. On click of such item:
  1. content will be copied to the <caption> portion of the control and
  2. value of the value attribute will be copied to the value attribute of the control itself.

If there is no menu attribute defined then this behavior will use first <menu> or <popup> child of the element that has this behavior applied.

Example #1, selector with external items:

  <button type="selector" menu="popup#some-popup" />
  ...
  <popup id="some-popup">
     <li value="1">First</li>
     <li value="2">Second</li>
     ...
  </popup>

Example #2, selector with internal items:

  <button type="selector">
    <caption>Select some value</caption>
    <popup>
       <li value="1">First</li>
       <li value="2">Second</li>
       ...
    </popup>
  </button>

Value of the element is a value of attribute “value” of the selected menu item.

Along with the standard set of events (mouse, keyboard, focus) behavior: selector generates:

• BUTTON_STATE_CHANGED event - value was changed by the user.