CellTableがクリックされました

Question

私は、テキストフィールドと、提案項目を示すCellTableのポップアップで構成されるコンボボックスを持っています。テキストフィールドには、CellTableの選択を更新する変更ハンドラがあります。

文字を入力して既に選択されている候補をクリックすると、最初のクリックが飲み込まれます。 2番目のクリックが機能し、CellTable.addDomHandler（...）を使用して選択がトリガーされます。

最初のクリックを飲み込んだ理由は何ですか？

例コード：

private static class SuggestFieldTextAndPopupSandbox extends SimplePanel { 
     private final TextField mText; 
     private CellTable<Handle<String>> mTable; 
     private SingleSelectionModel<Handle<String>> mTableSelection; 
     private SingleSelectionModel<Handle<String>> mSelection; 
     private ProvidesKey<Handle<String>> mKeyProvider = new SimpleKeyProvider<Handle<String>>(); 
     private PopupPanel mPopup; 
     private List<Handle<String>> mData; 

     public SuggestFieldTextAndPopupSandbox() { 
      mData = Lists.newArrayList(new Handle<String>("AAA"), new Handle<String>("AAB"), new Handle<String>("ABB")); 
      mSelection = new SingleSelectionModel<Handle<String>>(); 

      mText = new TextField(); 
      mText.addKeyPressHandler(new KeyPressHandler() { 
       @Override 
       public void onKeyPress(KeyPressEvent pEvent) { 
        mPopup.showRelativeTo(mText); 
       } 
      }); 
      mText.addBlurHandler(new BlurHandler() { 
       @Override 
       public void onBlur(BlurEvent pEvent) { 
        mTableSelection.setSelected(startsWith(mText.getValue()), true); 
       } 
      }); 
      mText.addChangeHandler(new ChangeHandler() { 

       @Override 
       public void onChange(ChangeEvent pEvent) { 
        mText.setText(mText.getText().toUpperCase()); 
       } 
      }); 

      mTable = new CellTable<Handle<String>>(0, GWT.<TableResources>create(TableResources.class)); 

      mTable.setTableLayoutFixed(false); 
      mTableSelection = new SingleSelectionModel<Handle<String>>(mKeyProvider); 
      mTable.setSelectionModel(mTableSelection); 
      mTable.addDomHandler(new ClickHandler() { 
       @Override 
       public void onClick(final ClickEvent pEvent) { 
        Scheduler.get().scheduleFinally(new ScheduledCommand() { 

         @Override 
         public void execute() { 
          mSelection.setSelected(mTableSelection.getSelectedObject(), true); 
          mText.setFocus(true); 
          mPopup.hide(); 
         } 
        }); 
       } 
      }, ClickEvent.getType()); 
      mTable.addColumn(new TextColumn<Handle<String>>() { 
       @Override 
       public String getValue(Handle<String> pObject) { 
        return pObject.get(); 
       } 
      }); 
      mTable.setRowData(mData); 

      mPopup = new PopupPanel(); 
      mPopup.setAutoHideEnabled(true); 
      mPopup.setWidget(mTable); 
      mPopup.setWidth("200px"); 
      mPopup.setHeight("200px"); 

      VerticalPanel p = new VerticalPanel(); 
      p.add(mText); 
      setWidget(p); 
     } 

     private Handle<String> startsWith(final String pValue) { 
      final String val = nullToEmpty(pValue).toLowerCase(); 
      int i = 0; 
      for (Handle<String> item : mData) { 
       String value = item.get(); 
       if (value != null && value.toLowerCase().startsWith(val)) { 
        return item; 
       } 
       i++; 
      } 
      return null; 
     } 

    } 

Answer 1

私はあなたの問題を再現し、ここで問題です： 次の提案をクリックしたときに起こっている：

• をテキストフィールドが原因フォーカスを失うています処理される対応するChangeEvent、その後にBlurEventが追加されます。
• クリックするとポップアップが表示され、現在フォーカスが取得されているため、飲み込まれます。

テキストフィールドのChangeHandlerとBlurHandlerを削除すると、問題はなくなります。しかし、私は次のようにmTableSelectionに選択ハンドラーの相対でmTableのDOMハンドラを交換してみてください 別の解決策を見つけたと思う：

mTableSelection.addSelectionChangeHandler(new Handler(){ 

      @Override 
      public void onSelectionChange(SelectionChangeEvent event) { 
       Scheduler.get().scheduleFinally(new ScheduledCommand() { 

        @Override 
        public void execute() { 
         mSelection.setSelected(mTableSelection.getSelectedObject(), true); 
         mText.setFocus(true); 
         mPopup.hide(); 
        } 
       }); 
      } 

     }); 

Answer 2

はこれを適切に解決するためにどのような方法を発見しました。

ユーザーが提案リスト領域を飛び越したときにぼかしハンドラーをスキップすると、少なくとも問題が解決されなかったため、問題が解決されたように見えました。

これは、ユーザーが提案項目をクリックする直前にテキストがぼやけており、選択変更が発生するためです。これは、ユーザーが項目をクリックしたときの選択を取り消します。