フォーカスイベントによって隠されているember要素がクリックイベントをブロックしています

Question

私には奇妙な問題があります。

要素がフォーカスアウトイベントによって隠されている場合、フォーカスをトリガした対応するクリックイベントを適切にアタッチできないようです。たとえば、<a>タグが入力に対してフォーカスアウトイベントをトリガーし、コードが_focused〜falseの場合は、selectOptsイベントはトリガーされません。フォーカスアウトの結果としてaタグが非表示になっている場合にのみ発生します。

また、aタグが非表示になっているかどうかは関係ありません。どちらかといえば、display:noneの場合でも、selectOptというアクションは発生しません。ここで

は私のコードです：ここでは

<div class="dropdown"> 
    {{input value=value class='form-control' focus-in="focused" focus-out="unfocused" }} 
    {{#if _focused}} 
     <ul class='dropdown-menu'> 
      {{#each _filteredOptions as |opt|}} 
       <li><a href="#" {{action "selectOpt" opt}}>{{opt}}</a></li> 
      {{/each}} 
     </ul> 
    {{/if}} 
</div> 

は、問題を示す燃えさしtwilldleです。

https://ember-twiddle.com/6bbdb669d19d7a498e645bb0297f1b46?openFiles=templates.components.input-autocomplete.hbs%2Ctemplates.components.input-autocomplete.hbs

それは問題はテキスト領域に焦点を当てる表示し、入力の下に表示されるリンクのいずれかを選択してみてもらうために。リンクを選択すると、入力フィールドに値を入力することになります。

Answer 1

focus-inとfocus-outの代わりに、ちょうどfocus-inを使用できます。したがって、入力focus-inイベントトリガーをクリックし、_focusedをtrueに設定します。次に、アクションselectOptで値を設定し、その後にプロパティ_focusedをfalseに設定します。

<div class="dropdown"> 
{{input value=value class='form-control' focus-in='focused' }} 
{{#if _focused}} 
    <ul class='dropdown-menu'> 
     {{#each options as |opt|}} 
      <li> 
      <a href="#" {{action "selectOpt" opt}}>{{opt}}</a> 
      </li> 
     {{/each}} 
    </ul> 
{{/if}} 

入力-autocomplete.js

actions: { 
    focused() { 
     this.set('_focused', true); 
    }, 
    selectOpt(opt) { 
     console.log(opt); 
     this.set('value', opt); 
     this.set('_focused', false); 
    } 
} 

私はそれがexxeptアクション前と同じだ入力自動補完のためのすべてのコードが含まれていませんでした。また、入力時にクリックしたときに結果が得られなかったため、オプション配列instedを使用しました。