Custom Input Field in Grid loses focus

[Bernd]

I have a Grid component with a custom cell property. The input field for the cell is determined dynamically depending on a different field type input. So for example if the dataType is 'string" I display a simple input field, if it is 'enum' I display a NumericTextBox.

The grid and the determination of the input field can be seen here:

https://stackblitz.com/edit/react-ts-xapte3?file=index.tsx

This is NOT a working application because it is just too big to put here in its full glory... In the index.tsx from line 200 to 251 you see the implementation of the cell ("ValueCell") and in the file CustomInputFields you can find the ChannelTypeInput component. As the FieldRenderProps require a onFocus and onBlur handler, I tried to implement that myself but I guess this is not enough to handle them.

This works perfectly but the issue is that if I try to type into the Input or NumericTextBox, it loses focus after every character and I have to click into it again. How can I get rid of this behavior?

Another question is: The NumericTextBox also allows negative values. Can I somehow specify that only positive values can be added?

[Stefan]

Hello, Bernd,

Thank you for the code.

This usually occurs when a component is passed like an inline function or is initialized directly in the main component body. This causes the component to re-mount each time the value changes. This leads to losing the focus as this is a new re-mounted component.

I can suggest checking our demo where we have different editors in the Grid with a FieldArray:

https://www.telerik.com/kendo-react-ui/components/form/field-array/

For the second question - The NumericTextBox has a min property that we can use. This will still allow entering negative values, but it will become 0 on blur.

Regards,
Stefan
Progress Telerik

[Bernd]

Hi Stefan.

Hm, I call the grid component from a FieldArray but obviously I guess I did something wrong. I do it like this:

<FieldArray
	name="typeValues"
	component={ChannelDataTypeGrid}
	dataItemKey={DATA_ITEM_KEY}
	channelType={channelType}
/>

I didn't use the FormGridEditContext though. I will have a closer look at the example, check it out and get back.

[Stefan]

Hello, 

Yes, usually these issues are resolved using the React.Context. We use it to pass extra props down to components. If we do not use it, the alternative is to make a function that will pass original props + our props. These functions are usually what causes React to re-mount the components. React.Context is made to resolve this specific issue in React and make passing props between component more convenient:

https://reactjs.org/docs/context.html

[Bernd]

I have added the context to my application and changed the components according to your examples and now it works perfectly. Thank you very much for your great support!