Editable dropdown menu

README_01.md

An example of an editable dropdown menu

View Twiddle | Copy Twiddle | View Gist

Original idea of this README taken from @rwjblue

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

application.template.hbs

{{combo-box}}{{combo-box}}
<p>This is a sentence</p>
{{combo-box}}

combo-box.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  //tagName:'span',
  classNames:['editable-dropdown-menu'],
  showOptions:false,
  optionList:[
    {value:1, text:"cosa 1"},
    {value:2, text:"cosa 2"},
    {value:3, text:"cosa 3"}
  ],
  menuId:Ember.computed(function(){
    return 'menu_' + this.get('elementId');
  }),
  labelId:Ember.computed(function(){
    return 'label_' + this.get('elementId');
  }),
  init(){
    this._super(...arguments);
    const menuId = '#' + this.get('menuId');
    const labelId = this.get('labelId');
    Ember.$(document).click((event) => {
      console.log(event.target.id);
      if(event.target.id === labelId){
      this.send('labelClicked');
      } else {
        if(!$(event.target).closest(menuId).length) {
          if($(menuId).is(":visible")) {
            $(menuId).hide()
            this.set('showOptions',false);
          }
        }  
      }
    })
  },
  willDestroyElement(){
    const menuId = '#' + this.get('menuId');
    //$(menuId).unbind( 'click', clickDocument );
  },
  actions:{
    labelClicked(){
      this.toggleProperty('showOptions');
    },
    optionSelected(value){
      this.set('result',value);
      this.set('showOptions',false);
    }
  }
});

combo-box.template.hbs

<input type="text" value={{result}}><span id={{labelId}}>▾</span>
{{#if showOptions}}
<ul id={{menuId}}>
{{#each optionList as |option|}}
<li onclick={{action 'optionSelected' option.value}}>{{option.text}}</li>
{{/each}}
</ul>
{{/if}}

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.editable-dropdown-menu{
  display:inline-block;
  position:relative;
  width:100%;
}

.editable-dropdown-menu > input{
  width: 100%;
  height: 34px;
  font-size: 17px;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
}

.editable-dropdown-menu > span {
    right:7px;
    top:8px;
    cursor: pointer;
    position:absolute;
  }
.editable-dropdown-menu > ul{
    list-style-type: none;
    padding:0;
    margin:0;
    border:1px solid lightgrey;
    width: 100%;
    position:absolute;
  	z-index:10;
  }
.editable-dropdown-menu > ul > li {
    padding-left: 5px;
    background-color:white;
  }
.editable-dropdown-menu > ul > li:hover{
    background-color:lightblue;
}

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}