Ag-Grid React headerComponentFramework маленький щелчок для цели на мобильном телефоне? - PullRequest
Новая
       57

Ag-Grid React headerComponentFramework маленький щелчок для цели на мобильном телефоне?

0 голосов
/ 09 февраля 2019

Я работаю над системой сетки с Ag-Grid и хотел бы поместить значок SVG (и другие вещи) в заголовок столбца.Их пример использует cellRendererFramework для визуализации пользовательского содержимого в заголовке столбца.Моя проблема, однако, заключается в том, что когда я пытаюсь это сделать, область, которая вызывает событие onClick для моего компонента, фактически вне моего компонента для устройств с сенсорным экраном.Все отлично работает, если я использую мышь, но мне нужно, чтобы она работала и на мобильном телефоне.

clickable areas

Замечу, что кликабельныйобласти простираются до края синего элемента (мой пользовательский компонент заголовка), но я немного выделил его снаружи, чтобы показать края.

Вот мой код для columnDefs: 

const gridOptions = {
    columnDefs: [
      {
        headerName: 'Type',
        field: 'metadata.type',
        headerComponentFramework: (props) => {
          return (
            <div
              onClick={() => {
                console.log('column header clicked'); // Only logged when click is within the red areas
                props.setSort(sortDirection, false);
              }}
            >
                Header Title
            </div>
          );
        },
        width: 250,
        resizable: true,
        sortable: true,
      },
      // Other column defs
    ]
}

Некоторые другие вещи, которые я отмечу: - Когда это работает , следующая ошибка регистрируется на консоли.Однако я не нашел ничего полезного при исследовании. 

[Intervention] Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
  • В этом примере я использую встроенный функциональный компонент, но я также пробовал это с функциональным компонентом, объявленнымкак константа, а также компонент класса.Результаты были одинаковыми
  • У меня есть другие столбцы, использующие cellRendererFramework, и они работают нормально.
  • Когда я изменяю размер столбца, область компонента увеличивается, но цели кликов остаются прежними.
  • Я использую материальную тему, но я пробовал ее с Бэлхэмом, и результат не изменился.
  • Возможно, это не связано, но я использую Typescript, и нетПохоже, что это какие-либо типы для реквизита компонента headerComponentFramework.
...