Skip to content

[Bug][Grid] Edit mode stealing focus on keypress #3276

Open
@PaitoAnderson

Description

@PaitoAnderson

Description

When using a <Input /> or <AutoComplete /> control in the same screen as a grid that is in edit mode you can't type more than 1 character at a time without the input focus jumping to the grid.

Code sample just in case the StackBlitz isn't working:

import * as React from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { Input } from '@progress/kendo-react-inputs';
import './styles.css';

const data = [{ inEdit: true, Name: 'John' }];

const App = () => {
  const [input, setInput] = React.useState('');
  return (
    <>
      <Input
        value={input}
        onChange={(event) => {
          setInput(event.value);
        }}
      />
      <br />
      <br />
      <Grid data={data} editField="inEdit">
        <GridColumn field="Name" />
      </Grid>
    </>
  );
};
export default App;

Plan

KendoReact

Steps To Reproduce

  1. Open the following example: https://stackblitz.com/edit/react-8nwotr8b-wworhmvr?file=app%2Fapp.jsx
  2. Type any character into the <Input /> field

Screenshots or video

No response

Actual Behavior

Each character typed into <Input /> control causes the focus to jump to the first Grid cell in edit mode

Expected Behavior

Focus stays in <Input /> control and I can type freely

Browser

Chrome

Browser version

latest

OS type

MacOS

OS version

15.5

Last working version of the KendoReact package (if regression).

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions