Css 从显示无切换到显示块时，组件动作未触发

我有一个简单的Emberjs组件，它由一个输入字段和一组迭代

项的
div
组成

最初，
items
div是
display:none
当输入字段被聚焦时，
items
div获得
display:block

集合中的每个项目都有一个点击
selectItem
的
action
处理程序。使用此CSS，单击项目不会命中操作

但是，如果css规则：
.items{display:none；}
被删除（JS fiddle上css中的第18行），则单击进入操作

这是一把JS小提琴

一个简单的组件：

App.DropDownComponent = Ember.Component.extend({
    selectedName: null,
    items: [{id: 1, name: 'one'}, {id: 2, name: 'two'}],
    actions: {
        selectItem: function(item){
            alert('Selected ' + item.name);
            this.set('selectedName', item.name);
        }
    }
});

以及组件的模板：

<script type="text/x-handlebars" id="components/drop-down">
  <h1>Drop Down</h1>
  <div>
   {{ input value=selectedName id="form-input" }}
    <div class='items'>
      {{#each item in items}}
        <div class='item' {{action 'selectItem' item}}>
           {{ item.name }}
        </div>
      {{/each}}
    </div>
  </div>
</script>

问题是，当您的输入框失去焦点时，您正在隐藏下拉列表。因此，即使看起来您在单击元素，实际上您什么也没有单击

也就是说，在单击操作之前（或出于其他原因），您需要一直查看div

为此，我可能会使用Ember.TextField并连接到触发选项的
focusIn
事件，然后在选择它时关闭

自定义文本字段
模板
啊，我现在明白了。这是可行的，但不能完全解决我的问题。在您的实现中，如果用户在列表之外单击，我希望列表关闭。我通过添加
focus out='close'
和一个
close
操作
this.set（'visible'，false）尝试了这个方法，但再次。。。我也有同样的问题。有什么想法吗？
#form-input{
    width:200px;
    font-size:20px;
    padding:5px;
}
#form-input:focus + .items{
    opacity:1;
    display:block;
}
.items{
    font-size:20px;
    -webkit-transition:opacity .2s ease;
    width:200px;
    display:none;
}

App.TextField = Ember.TextField.extend({
  focusOut: function(evt) {
    this.sendAction('focus-out');
  },
  focusIn: function(){
    this.sendAction('focus-in');   
  }
});

{{view App.TextField value=selectedName id='form-input' focus-in='open'}}
<div {{bind-attr class=':items visible:showItems:hideItems'}}>
  {{#each item in items}}
    <div class='item' {{action 'selectItem' item}}>
       {{ item.name }}
    </div>
  {{/each}}
</div>

App.DropDownComponent = Ember.Component.extend({
    selectedName: null,
    visible: false,
    items: [{id: 1, name: 'one'}, {id: 2, name: 'two'}],
    actions: {
        selectItem: function(item){
            alert('Selected ' + item.name);
            this.set('selectedName', item.name);
            this.set('visible', false);
        },
        open: function(){
            this.set('visible', true);
        }
    }
});