Просмотр исходного кода

Merge pull request #12189 from ryantxu/focus-panel-search

autoFocus the add-panel search filter, and add on enter
Patrick O'Carroll 7 лет назад
Родитель
Сommit
9802d86783
1 измененных файлов с 12 добавлено и 1 удалено
  1. 12 1
      public/app/features/dashboard/dashgrid/AddPanelPanel.tsx

+ 12 - 1
public/app/features/dashboard/dashgrid/AddPanelPanel.tsx

@@ -154,6 +154,15 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
     });
   }
 
+  filterKeyPress(evt) {
+    if (evt.key === 'Enter') {
+      let panel = _.head(this.state.panelPlugins);
+      if (panel) {
+        this.onAddPanel(panel);
+      }
+    }
+  }
+
   filterPanels(panels, filter) {
     let regex = new RegExp(filter, 'i');
     return panels.filter(panel => {
@@ -229,10 +238,12 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
               <label className="gf-form gf-form--grow gf-form--has-input-icon">
                 <input
                   type="text"
-                  className="gf-form-input max-width-20"
+                  autoFocus
+                  className="gf-form-input gf-form--grow"
                   placeholder="Panel Search Filter"
                   value={this.state.filter}
                   onChange={this.filterChange.bind(this)}
+                  onKeyPress={this.filterKeyPress.bind(this)}
                 />
                 <i className="gf-form-input-icon fa fa-search" />
               </label>