Not working with current versions of EUI

[BarakChamo]

Hi @chandlerprall,

Thanks for putting together this great demo!

I'm using EUI and trying to basically replicate your setup in another project, being able to use input fields as cells while maintaining arrow navigation on the grid.

It seems however that this does not work in the current version of EUI (I'm on 37.3.0), and the input is stuck on the <EuiFieldText/> instead.

I wanted to know if you'd be able to test this project with current versions of DataGrid, or if you're aware of changes to the grid and how this can be worked around?

Thanks!

Edit: I'm using exactly the same column configuration and this is the code for the cell component, using Formik context:

const Cell = <T,>({ name, type, combos, ...props }: PropsWithChildren<ICell & EuiTextProps>): ReactElement => {
    // const [isFocused, setIsFocused] = useState(false)
    const { getFieldProps } = useFormikContext<T>()

    // get field by name (for context isolation)
    const { value, onBlur, onChange, ...field } = getFieldProps(name)

    return <EuiFieldText {...field} compressed className='cell-input' onChange={onChange} />

}

export default Cell

[chandlerprall]

Well that's certainly weird, looks like there's been a change in EuiFieldText and/or one of the components it uses, and it's breaking the cell's ability to inform the grid component it has received focus.

As a demonstration, you can tab into the grid and start using arrow keys as normal, but if you then click into a different cell and press an arrow key, the newly focused cell is relative to the cell in focus before the click.

[BarakChamo]

Hi @chandlerprall thanks for picking this up!

That's pretty much what I've witnessed, in addition to inconsistent behavior of the grid when populated by the text field components. Arrow navigation works and doesn't sporadically, but I couldn't yet identify a pattern that makes it work consistently.

As you noted, once the grid loses focus and a new cell is focused, arrow navigation picks up from the last cell you navigate to with the arrows.