set focus on ace editor

Question

I am using ng-grid. In ng-grid I have few textbox along with a button. By clicking the button, one ace editor is going to open where I can edit/add the text. But when I am clicking the button, there is no focus(no cursor blink) on the editor, I have to manually click on the editor to get the focus. Here are portion of my html and js file code

html:

<div class="modal fade" id="valueModal" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button id="mbx-procsr-properties-closeFile" type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                            <h4 class="modal-title">Edit Value</h4>
                        </div>
                        <div class="modal-body">
                            <div ui-ace="{onLoad : loadValueData,
                  theme : 'chaos',
                  useWrapMode : true,
                  showGutter: true,
                  mode: 'json'
                }">
                            </div>
                            <div class="modal-footer">
                                <button id="mbx-procsr-properties-close" type="button" class="btn btn-default" data-dismiss="modal" ng-click="close()">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Javascript:

 $scope.loadValueData = function (_editor) {
 editor = _editor;
 _editor.getSession().setUseWorker(false);
 _editor.focus();
 };

I want the focus/cursor blink on ace editor

I am giving you the snippet code of ng-grid-gridOptionsForProcessor

<textarea  class="form-control"  ng-model="COL_FIELD" style="width:90%;height:45px" placeholder="required" />\n\
                                    <a ng-click="isModal(row)" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#valueModal"  class="right">\n\
                                    <i class="glyphicon glyphicon-new-window"></i>

\n\

and the content of isModal is

$scope.isModal = function (row) {
                rowObj = row;
                editor.setValue(row.getProperty('value').toString());

so is it possible to set the focus in isModal

score 3 · Accepted Answer · edited May 23 '17 at 12:11

3

So the problem you are having is that you want to have the focus happen after the modal has been shown. You need to put the focus (and gotoLine) in a $timeout after the modal has been shown. This solution is kinda hacky since we are just assuming that the modal and editor will be ready a little after the isModal from the click is fired.

  // make sure you include the $timeout dependency

  var editor;
  $scope.loadValueData = function (_editor) {
    editor = _editor;
    editor.getSession().setUseWorker(false);
    editor.setReadOnly(true);
  };

  var enableAndFocusEditor = function() {
    if (editor) {
      editor.focus();
      var session = editor.getSession();
      //Get the number of lines
      var count = session.getLength();
      //Go to end of the last line
      editor.gotoLine(count, session.getLine(count-1).length);
      editor.setReadOnly(false);
    }
  };

  $scope.isModal = function (row) {
    $scope.rowObj = row;
    $timeout(enableAndFocusEditor,500);
    //editor.setValue(row.getProperty('value').toString());
  };

  $scope.close = function() {
    $scope.rowObj = null;
    editor && editor.setReadOnly(true);
  };

I got the code for putting the focus at the end from this answer.

see the sample: http://plnkr.co/edit/KqgY32?p=preview

I can see that you are using the Bootstrap Javascript in order to open and close the modal so I you an answer that works for that use case, although this is in my opinion a hacky way of getting it done. The right way to do it would be to use the angular-ui bootstrap library in order to have a better api for use within an AngularJS controller -- where you will then have access to know when the modal was actually shown. It is possible to hook into Bootstrap's 'shown.bs.modal' event but for that you would have to write your own directive.

edited May 23 '17 at 12:11

Community

1
1

answered Mar 17 '14 at 21:37

JoseM

4,302
2
24
35

please the check the screen shots – Sudip7 Mar 18 '14 at 05:07
I tried your suggestion but still not getting the focus on the editor, is there any injection problem – Sudip7 Mar 18 '14 at 12:23
The screen shot doesn't really show why it's not working as you expect it to but based on your code I now realize why it's not working for you. You have the ace editor in a modal that only shows after some user action (clicking on the blue icon) -- and you want the focus to happen after the modal has appeared, not onLoad of the ace editor. The easiest way is to just call focusToEnd [after the modal opened promise is resolved](http://angular-ui.github.io/bootstrap/#/modal). If I have time, I'll try to create an updated sample with a modal but this tip should help you out. – JoseM Mar 18 '14 at 14:30
so do you mean I have to change argument to onClick(in the html) and in the js, just **editor.focus()** and **session.setUserWorker(false)** – Sudip7 Mar 19 '14 at 05:29
@Sudip7 see my updated answer -- if want to discuss more we should probably go to a chatroom http://chat.stackoverflow.com/rooms/50044/question-22459162 – JoseM Mar 19 '14 at 15:42
it worked... Though I need to make some changes to fit my need. Thank you for your sincere help. – Sudip7 Mar 20 '14 at 06:56
Hi @JoseM, I am facing some problem in ace editor again, as you aware of my problem thats why I am asking for help again. I also posted http://stackoverflow.com/questions/22686397/how-to-delete-the-content-of-ace-editor-on-a-validation-error in SO. – Sudip7 Mar 27 '14 at 11:37

set focus on ace editor

1 Answers1

Linked