Issue in keyborad

[SampathkumarSadasivam]

Hi, focus issue on key navigaion.

[inovua-admin]

Thanks for reporting, but this is not a valid bug report. Please attach a code sample and describe what you are doing. Thank you

[SampathkumarSadasivam]

Hi,

Sample Code

import React from 'react'

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

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

const gridStyle = { minHeight: 550, maxWidth: 1000 };

const columns = [ { defaultLocked: true, name: 'id', header: 'Id', defaultVisible: false, defaultWidth: 100, type: 'number' }, { name: 'name', header: 'Name', defaultFlex: 1, minWidth: 450 ,editable:true}, { name: 'country', header: 'Country', defaultFlex: 1, minWidth: 200, render: ({ value }) => flags[value] ? flags[value] : value }, { name: 'city', header: 'City', defaultFlex: 1, minWidth: 450 ,editable:true}, { defaultLocked: 'end', name: 'age', header: 'Age', minWidth: 100, type: 'number' } ]

const App = () => { return (

Scroll horizontally to see the effect

<ReactDataGrid idProperty="id" reorderColumns={false} style={gridStyle} columns={columns} dataSource={people} />

); }

export default () => <App />

[SampathkumarSadasivam]

Simulation

Click edit mode on name and press tab focus was moved but it was not visible in viewport.

[inovua-admin]

The thing is you want scrolling when navigating between cells with tab-navigation, but this issue occurs when not enough space in the scrollable viewport and you have too many locked columns. Try keeping each column smaller in size than the non-locked viewport size.