There is no way to see whether a particular row has a focus or not

[yurigenin]

• what edition are you using - enterprise
• version for @inovua/reactdatagrid-enterprise - 4.1.14

Relevant code or config

import React from 'react'

import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'

import NumberFilter from '@inovua/reactdatagrid-community/NumberFilter'
import SelectFilter from '@inovua/reactdatagrid-community/SelectFilter'
import DateFilter from '@inovua/reactdatagrid-community/DateFilter'

import people from './people'
import flags from './flags'

const gridStyle = { minHeight: 600 }

const COUNTRIES = {
  ca: 'Canada',
  uk: 'United Kingdom',
  usa: 'United States of America'
}

const countries = people.reduce((countries, p) => {
  if (countries.filter(c => c.id == p.country).length) {
    return countries
  }
  countries.push({
    id: p.country,
    label: COUNTRIES[p.country] || p.country
  })

  return countries
}, []);

const filterValue = [
  { name: 'name', operator: 'startsWith', type: 'string', value: '' },
  { name: 'age', operator: 'gte', type: 'number', value: 21 },
  { name: 'city', operator: 'startsWith', type: 'string', value: '' },
  {
    name: 'birthDate',
    operator: 'before',
    type: 'date',
    value: ''
  },
  { name: 'country', operator: 'eq', type: 'select', value: 'ca' }
];

const columns = [
  { name: 'id', header: 'Id', defaultVisible: false, defaultWidth: 80, type: 'number' },
  { name: 'name', header: 'Name', defaultFlex: 1 },
  { name: 'age', header: 'Age', defaultFlex: 1, type: 'number', filterEditor: NumberFilter },
  {
    name: 'country',
    header: 'Country',
    defaultFlex: 1,
    filterEditor: SelectFilter,
    filterEditorProps: {
      placeholder: 'All',
      dataSource: countries
    },
    render: ({ value })=> flags[value]? flags[value]: value
  },
  {
    name: 'birthDate',
    header: 'Bith date',
    defualtFlex: 1,
    minWidth: 200,
    filterEditor: DateFilter,
    filterEditorProps: (props, { index }) => {
      // for range and notinrange operators, the index is 1 for the after field
      return {
        dateFormat: 'MM-DD-YYYY',
        cancelButton: false,
        highlightWeekends: false,
        placeholder: index == 1 ? 'Created date is before...': 'Created date is after...'
      }
    },
    render: ({ value, cellProps }) => {
      return moment(value).format('MM-DD-YYYY')
    }
  },
  { name: 'city', header: 'City', defaultFlex: 1 },
];

const App = () => {
  return (
    <div>
      <h3>Grid with default filter value</h3>
      <ReactDataGrid
        idProperty="id"
        style={gridStyle}
        defaultFilterValue={filterValue}
        columns={columns}
        dataSource={people}
      />
      <p>Delete the filters if you want to show all data. You can click the configure icon and then "Clear All"</p>
    </div>
  )
}

export default () => <App />

I know you recently addressed some of the issues with focus. Thank you for working with us on making it even more accessibility-friendly!

The problem that currently exists is that there is no way to distinguish a row that is just active and the row that is both active and focused. For instance, the example I posted, as you tab through the filter editors and filter menus the focus is clearly shown as it changes. But once you are on the last filter menu of the last column and you hit Tab the first row of the grid gets focus but there is no any kind of change in its visual. The active borders are still there but there is no visual change to indicate that the row is also focused and you can use Up and Down keys to change an active row.

When you do not have any other focusable elements like filter editors the active row borders serve like a focus indicator surrogate but this technique does not work when you have other focusable elements inside the grid.

I think it would be better if you supported both active and focused state for a row. And if it is focused it would have a slightly different background color, so that when you tab between a row and a filter editor you would clearly see that the row gains or loses a focus.

Thank you for all your work!