CellNav + Edit feature results in the grid taking over focus from elements located outside of the grid

I am currently dealing with an issue in my application where I am using ui-grid along with cellNav and setting editOnFocus=true for certain columns. The problem arises when the END_CELL_EDIT and CANCEL_CELL_EDIT events in the edit feature always trigger gridCtrl.focus(). This causes a situation where if I have a focus on an editable cell and then click on an input field outside of the grid, the focus is immediately stolen back by the grid.

When I click on an input field outside of the grid, it correctly receives focus. However, simultaneously the END_CELL_EDIT event is fired, leading to gridCtrl.focus() being called and shifting the focus away from the external input field.

I am looking for a way to override this default behavior in ui-grid.edit. Why is this behavior considered standard? Is there a solution to prevent the grid from constantly stealing the focus back?

To demonstrate this issue, you can check out this plnkr example. If you click on the age column to enable editing mode and then click on the text area, you will notice that the focus shifts momentarily before returning to the grid, making further edits impossible.

http://plnkr.co/edit/Sg1dTcsMN0zNRDmauwoT This behavior does not align with our requirements as we automatically set the focus on a specific cell (entering edit mode) whenever the row is selected or navigated to. As a result, any action that changes rows or moves the focus outside of the grid triggers the END_CELL_EDIT event and the unwelcome focus behavior described above.

javascriptangularjsangular-ui-grid

Answer №1

A helpful strategy is to establish an alternate focus point while postponing it slightly, allowing the grid to function smoothly. Key excerpts of code snippets from your revised Plunker are highlighted below.

HTML (for binding):

<textarea id="textarea" ng-focus="delayFocus()"></textarea>

Controller (to introduce digest cycle delay):

$scope.delayFocus = function() {
  $timeout(function() {
    focus('textarea');
    $scope.gridApi.grid.cellNav.clearFocus();
  });
}

Factory (for re-focusing purpose):

app.factory('focus', function($timeout, $window) {
  return function(id) {
    $timeout(function() {
      var element = $window.document.getElementById(id);
      if (element)
        element.focus();
    });
  };
});

Check out the updated version on Plunker: http://plnkr.co/edit/UX8tbVwi9gG4zsMRG0kV?p=preview.

If desired, you could potentially consolidate the above into a single directive and apply it selectively to required controls - I'm here to assist as needed.

This should provide a solid foundation for your project moving forward.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The action 'addSection' is restricted to private access and can only be utilized internally by the class named 'File'

const versionList = Object.keys(releaseNote) for (const key of versionList) { // Skip a version if none of its release notes are chosen for cherry-picking. const shouldInclude = cherryPick[key].some(Boolean) if (!shouldInclude) { continue } // Include vers ...

javascriptnext.jsdocx

Developing a jQuery loop

I am in the process of creating a function that will change the background color (color A), box color (color B), and text color (color A) when a user clicks on the refresh button. I have already defined an array called 'colors', but I am struggli ...

javascriptjqueryarraysloops

What's the best way to determine which of the two forms has been submitted in Django?

On my homepage, I have both a log_in and sign_up form. Initially, the log_in form is displayed by default, but when a user clicks on the Sign Up button, the sign_up form appears. These toggles switch depending on which button the user clicks. from django ...

javascriptjquerypythondjango

Combining load and change events in jQuery at the same time

Often times, I find myself needing to attach a behavior to an element both after it has loaded and after a specific event has been triggered (such as "change"). I believe the most efficient approach would be to combine these actions in one line: $('# ...

javascriptjquery

Is it possible to create a button on-click feature without the traditional button appearance?

Currently, I am creating a button using React, but I don't want it to have the traditional button appearance. Is there a way for me to make it a clickable div without the default button style? Below is the code I am working with: <div style={style ...

javascriptreactjs

No overload error encountered with TypeScript function call

I am working on an async function that communicates with the backend and I need it to handle axios error messages. My goal is to display these messages in a form. export async function register( prevState: string | undefined, formData: FormData ) { t ...

javascriptreactjstypescriptnext.js

When you try to import from another file, the method is not defined

When I attempt to import a method from another file, I am encountering an issue where it returns undefined. The structure involves 3 files with one calling the next in sequence. File1: const { methodFromFile2 } = require('./file2'); methodFromFi ...

javascriptnode.jsnode-modules

Generating a menu in one-hour intervals

Could someone please advise on the best approach to generate a markup like the one below using Angular: <select> <option value="0000">00:00AM</option> <option value="0100">01:00AM</option> <option value="0200" ...

javascripthtmlangularjs

Expand the scope of the javascript in your web application to cater

I am in the process of creating a web application that utilizes its own API to display content, and it is done through JavaScript using AJAX. In the past, when working with server-side processing (PHP), I used gettext for translation. However, I am now ...

phpjavascriptajaxinternationalizationgettext

Is it possible to activate the :active pseudoclass by pressing the 'enter' key on the keyboard using solely CSS?

The CSS: a:focus { opacity: .75 } a:active { transform: translateY(4px) } The purpose: When keyboard users tab to the link, the :focus style serves as a visual indicator Upon pressing the enter key to activate the link, the :active style provides ...

javascriptjquerycssaccessibility

Disable button with Checkbox Javascript functionality

In my PHP code, I have an array of users that I pass to the view (in Laravel) and use a foreach loop to display all users in a table. Everything is working fine so far. However, I want to make a "send" button visible when a checkbox is clicked, instead of ...

javascriptphphtmlcheckbox

Tips for steering clear of getting caught in the initial focus trap

I have implemented Focus-trap (https://www.npmjs.com/package/focus-trap) in my modal to enhance keyboard accessibility. Here is a snippet of my code: <FocusTrap focusTrapOptions={{onDeactivate: onClose}} > <div> ... </div> <Focu ...

javascriptreactjsnext.jsfocus

Unable to access a PHP file within a JavaScript loop

In my HTML document, there is a button with an onclick method inside a JavaScript <script> tag. When this button is clicked, it triggers the deleteRow function, which is responsible for removing a row from a table on the page. Within the deleteRow f ...

javascriptphphtmlajax

Is there a way to restrict my input to only 10 numbers without allowing any characters?

Is there a way to restrict the phone number input to only allow 10 numbers and exclude any other characters? Currently, setting the maxLength attribute limits the characters to 10 but allows additional characters as well. If I change the type attribute to ...

javascripthtmlreactjs

Extract a specific pattern from a string using Javascript

Currently, I am attempting to extract a specific string from a tag in javascript using the following code: document.querySelector('.title h2').textContent However, when I execute this code, I am getting a result that includes unnecessary double ...

javascripthtml

Is there a way to make the checkbox and corresponding text display on a single line within my code snippet?

Bootstrap text-truncate is causing the checkbox and text to appear on separate lines in the following example. How can I adjust it to have the text right after the checkbox? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" / ...

javascriptbootstrap-4

Distributing information to modules made of Polymer

Is there a way to create a single source for all data that my elements can utilize but not change (one-way data-binding)? How can I achieve this without using a behavior? I attempted the following in my code: <script type="text/javascript" src="/data. ...

javascripthtmldata-bindingpolymerweb-component

Arranging xCharts based on the weekday order

Struggling with xCharts, specifically trying to display a bar chart showing numbers with corresponding days of the week in order. Despite my efforts, I can't seem to get them to appear in the correct sequence. Refer to the image below for reference: ...

javascriptjqueryjsonchartsbar-chart

Is it mandatory for the npm install command to only be compatible with Node.js for the script

I've encountered an API that provides a JS SDK, and the instructions on its GitHub page suggest using npm install. My question is whether I need to have Node.js in order to use this SDK since it seems to be designed for it, or if I can simply work wit ...

javascriptjqueryruby-on-railsnode.jsnpm-install

What steps can I take to stop the window/body from scrolling "through" a modal div?

Let me simplify my layout for you: <body> [... lots of content ...] <div id="modal-overlay"> </div> </body> The body has so much content that the whole page scrolls. The styling for #modal-overlay looks like this: #m ...

javascripthtmlioscss