I'm using custom inputs for datepickers in the grid when in-cell editing, and the issue I'm experiencing is that when I have one custom input A focused and click another custom input B to edit B, A is only closed from edit-mode and B is not set in edit-mode until I click it a second time.
The behaviour is different when clicking a "kendo-editor" instead, that cell will behave as expected and set that clicked cell into edit-mode.
Se this stackblitz for a live example of the issue: https://stackblitz.com/edit/react-ue6dyk
1. Edit one of the "Date" cells.
2. Click one of the "Date2" cells to edit that one.
Then try:
1. Edit one of the "Date" cells.
2. Click one of the "Total rate" cells.
5 Answers, 1 is accepted
This occurs because the input is not selected after edit.
We show this in our demo where inside the celRender we use the input ref and programmatically call the select method:
cellRender(tdElement, cellProps) { const dataItem = cellProps.dataItem; const field = cellProps.field; const additionalProps = (cellProps.dataItem[this.editFieldName] && (cellProps.field === cellProps.dataItem[this.editFieldName])) ? { ref: (td) => { const input = td && td.querySelector('input'); if (!input || (input === document.activeElement)) { return; } if (input.type === 'checkbox') { input.focus(); } else { input.select(); } } } : {Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan!
I've added code for setting focus programmatically, but it don't make any difference. The cells still doesn't even get into edit-mode.
<Grid style={{ height: '400px' }} data={data} onItemChange={itemChange} editField='inEdit' rowHeight={40} cellRender={(tdElement, cellProps) => { const additionalProps = { ref: (td) => { const input = td && td.querySelector('input'); if (!input || (input === document.activeElement)) { return; } if (input.type === 'checkbox') { input.focus(); } else { input.select(); } } } return React.cloneElement(tdElement, { ...tdElement.props, ...additionalProps, ...{ onClick: () => enterEdit(cellProps.dataItem, cellProps.field) } }, tdElement.props.children) }} > ... </Grid>Apologies for the incomplete information.
When a custom cell is used, the custom cell will be executed instead of the cell Render for that column. In this case, that logic has to be added directly in the custom cell:
return ( <td> <DatePicker ref={(el) => { if (el) { let input = el.element.querySelector('input') input.select() } }}I have added this to the SetDateCell in the provided example, I have also replaced onClick with onMouseDown. This is the updated version:
https://stackblitz.com/edit/react-ue6dyk-ag4vcw?file=app%2FsetDateCell.jsx
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
That does seem to solve the issue. Sadly it introduces another issue - now you can't open the DatePicker anymore, since the input field is always set to focus() or select() when the component is clicked. Any ideas?
See updated version: Latest version
This occur due to the onBlur event of the custom DateInput. It will call on change once the Input is blurred which will occurs when the calendar icon is clicked. This will cause change which will re-render the DatePicker and the input will be focused again.
I can suggest two approaches using flags:
1) Use a condition for setting the input on focus, so it is not focusing the input every time.
2) Call the onBlur function when the value is changed not on every blur event.
I hope this information will help to achieve the desired result.
Regards,
Stefan
Progress Telerik