How to prevent forced Grid ContentFocus?

Question

Hi,I have a grid that uses a template (as described here) to render a custom cell.The template contains an Angular component that itself contains multiple input and select elements.Whenever a row in this grid is clicked, the Grid searches down into my Angular component (via the internal Syncfusion ContentFocus class) looking for the first html input, select, textarea, button, [tabindex], etc. that it can find in the DOM and then calls 'focus' on that element.  I found the Syncfusion ContentFocus code here at line #521.I *do* want the grid row to be selectable, but my Angular component needs to control what (if anything) inside that row gets focus.The ContentFocus class hardcodes the list of focusable elements that it feeds to querySelectorAll, and it also hardcodes selection to be the first element found. * How do I disable this forced focusing of what should be the private internals of my own component?Thanks,Earl

Balaji Sekar · Accepted Answer

Hi Earl, 
 
Sorry for inconvenience caused. 
 
We are able to reproduce the mentioned issue at our end and logged the reported issue “Focus issue in column template while render multiple inputs in the same column.” as a bug at our end. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and will include the defect fix in our weekly patch release which is expected to be rolled out in the month of 14th April 2021. 
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.     
 
https://www.syncfusion.com/feedback/23788/contentfocus-issue-in-the-column-template 
 
Regards, 
Balaji Sekar

Balaji Sekar · Answer

Hi Earl, 
 
Greetings from the Syncfusion support. 
 
We have validated your query with provided the information and we suspect that you have used multiple input components in the  Grid using column.template feature so please share that code definition with video demonstration of the mentioned problem that will help to validate further. 
 
Regards, 
Balaji Sekar

pcafstockf · Answer

Hi Balaji,Here is a small (contrived) stackblitz sample demonstrating the problem.You can click the 'ID' column and the selected cell will be focused/highlighted as expected.However, if you click anything in the 'Ship Info' column (aka column.template), the Grid automatically focuses the country *select* control.If you try to select the Ship Info cell (by clicking to the *right* of the country select control), the grid cell does becomes selected for a brief moment, and then ContentFocus.getFocusable() *forces* selection to the country select control.If you try to click the 'Notes' input element, it does receive a focus event (which is expected because we clicked on it) and then immediately blurs, because once again  ContentFocus.getFocusable() forces the selection to be the country select control.The question is not about how to solve this simple sample demonstration.  It is about how to prevent the grid from interfering with the behavior of a custom cell template.  The widget inside the cell should decide how it behaves, not some hardcoded invisible logic in the Grid.* How can I prevent forced Grid ContentFocus?Thanks,-Earl

Balaji Sekar · Answer

Hi Earl, 
 
We checked your query with provided the information and our DataGrid focusing in the grid cell while click on grid content basis. If we bound the template in the Grid column we have focus to template element instead of grid cell. In your sample you have bound the two input components in the single column using column.template. If we click on second input component of Grid column it will focus to first input element based on our Grid’s focus behavior. 
 
Please share the purpose of the multiple input components rendering in the same Grid column and ensure that you want to focus the input component based on clicking to corresponding input. 
 
Regards, 
Balaji Sekar

pcafstockf · Answer

Hi Balaji,We are simply trying to use the Column template feature of the Grid, which says: "The column template has options to display custom element instead of a field value in the column."I was trying to keep the defect report as simple as possible, but I have enhanced the sample to provide more context.We have an incident catalog where the vast majority of incident's (99.99%) are 'low' or 'medium' priority and require no further information.  However, one in every ten thousand incidents are 'critical', and *when* an incident is critical the "Actions Taken" *must* be input.The incident AssessmentComponent (mocked in the sample) is a 3rd party "custom element" and has a great deal of internal logic.  It chooses what to display and whether it collects a single piece of information or multiple pieces.So back to the original report... I'm sure you would agree that when a user click on something that is displayed by a custom element, they do *not* expect the Grid to re-focus on something else.Again, you can see this demonstrated by clicking on the 'Actions Taken' input and note that it momentarily get's focus (due to the click) and then the Grid immediately hijacks the focus and moves it to the 'level' dropdown.This seems like a pretty clear defect to me, but just disabling this forced focus "feature" would be an okay workaround.Thanks,-Earl

pcafstockf · Answer

Hi Balaji,Any progress on this issue?Thanks,-Earl

pcafstockf · Answer

I can confirm that the 19.1.56 Grid release fixes this issue.https://stackblitz.com/edit/angular-ivy-nf9bqwThank you Balaji (and all).

Padmini Ramamurthy · Answer

Hi Earl, 
  
Glad that the issue resolved has been resolved. Please get back to us if you need any other assistance. 
  
Regards, 
Padmini

Balaji Sekar · Answer

Hi Earl, 
 
Yes, it has been fixed in v19.1.56 version of ej2-angular-grids package. 
 
We are glad to announce that our EJ2 Grid Weekly patch release (v19.1.56) has been rolled out successfully and in this release, we have included the fix for “Focus issue in column template while render multiple inputs in the same column” issue. So kindly update your ej2.angular.grids to our latest version (19.1.58) to resolve the reported issue. 
 
Feedback link: https://www.syncfusion.com/feedback/23788/contentfocus-issue-in-the-column-template  
 
Release Notes: https://ej2.syncfusion.com/documentation/release-notes/19.1.56/?type=all#grid 
 
Sample link: https://stackblitz.com/edit/angular-ivy-3jpapd 
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.  
 
Regards, 
Balaji Sekar