Почему элемент ввода не получает фокус?

Я использую версию сообщества ag-grid в проекте angular. Требование состояло в том, чтобы включить встроенное редактирование на вкладке, оно было достигнуто, но есть еще одно требование, которое заключается в том, что при навигации по вкладке и достижении последнего столбца и повторном нажатии клавиши табуляции он должен создать пустую строку и сосредоточиться на 1-м элементе новой строки как хорошо. Я могу передавать новые данные через функцию ag-grid setRowData(data).

Я попробовал startEditingCell() и setFocusedCell(), доступные в grid api. Они фокусируются на элементе, но курсор в элементе ввода не появляется.

import {
    Component, OnInit
} from '@angular/core';
import {GridOptions, StartEditingCellParams} from "ag-grid-community";

@Component({
  selector: 'app-angular-grid',
  templateUrl: './angular-grid.component.html',
  styleUrls: ['./angular-grid.component.css']
})
export class AngularGridComponent implements OnInit {

  gridOptions:GridOptions;
  constructor() {
  }

  ngOnInit() {
    this.initializeGridOption();
  }


  initializeGridOption() {
    this.gridOptions = {
      onGridReady: (params)=> {
        params.api.sizeColumnsToFit();
      },
      rowData: this.rowData,
      columnDefs: this.columnDefs,
      rowSelection: 'multiple',
      onCellEditingStopped: function (params) {
        let rowIndex = params.rowIndex;
        let rowDataLength = this.rowData.length;
        let colId = params.column.getColId();
        if (rowDataLength === rowIndex + 1 && colId === 'price') {
          let data = {id: this.rowData.length + 1, make: '', model: '', price: ''};
          this.rowData.push(data);

          params.api.setRowData(this.rowData);
          setTimeout(() => {
            params.api.startEditingCell({rowIndex: rowDataLength, colKey: 'make'});
            params.api.setFocusedCell(rowDataLength, 'make');

          });
        }
      }
    };
  }

  columnDefs = [
    {
      headerName: '',
      width: 40
    },
    {headerName: 'Make', field: 'make', editable: true},
    {headerName: 'Model', field: 'model', editable: true},
    {
      headerName: 'Price',
      field: 'price',
      editable: true
    }
  ];

  rowData = [
    {id: 1, make: 'Toyota', model: 'Celica', price: 35000},
    {id: 2, make: 'Ford', model: 'Mondeo', price: 32000},
    {id: 3, make: 'Porsche', model: 'Boxter', price: 72000}
  ];
}
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
1 862
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам не нужно явно устанавливать фокус ячейки с помощью setFocusedCell.

Проверьте этот пример планка, который я создал: Cell Editing

Дойдите до последней ячейки, нажмите вкладку и обратите внимание, что input уже сфокусирован.

setTimeout(() => {
  params.api.startEditingCell({rowIndex: rowDataLength, colKey: 'make'});
  //params.api.setFocusedCell(rowDataLength, 'make');
});

Да, это работает, также мне пришлось переместить editable=true из определения столбца в определение столбца по умолчанию. Я не знаю причину, но это работает.

Junaid Zubair 28.03.2019 20:06

Я заметил здесь, он работает только на плункере. На машине тоже пробовали?

Junaid Zubair 29.03.2019 12:17

оно работает. попробуйте воспроизвести его на планке, если что-то еще вы пропустили

Paritosh 29.03.2019 12:36

не может производить на plunk, так как фокус порта просмотра plunk остается в окне. Я скопировал весь код и запустил его на машине, он не фокусируется на последней вкладке. Но когда я помещаю элемент кнопки ниже директивы сетки, он начинает фокусироваться на последнем столбце. Странно, но это работает, мне просто нужно найти какое-то обоснование, почему мне нужно разместить дополнительный элемент под сеткой.

Junaid Zubair 30.03.2019 11:33

Другие вопросы по теме