0

I'm using sap.m.TabContainer with items containing sap.m.TextArea's. If I switch between tabs, the cursor position in the textarea's is reseted. I would like to keep the cursor position in the textarea's. Is there a possibility to store the current cursor position bevor leave and set the stored position on enter of the textarea? Regards, Annie

Annie W.
  • 328
  • 4
  • 22

1 Answers1

4

sap.m.TextArea inherits from the sap.m.InputBase which provides focus related APIs e.g. getFocusInfo and applyFocusInfo.

To get notified when the user enters or leaves the textarea you can add onfocusin and onfocusout as an event delegate and then store the focus info on focusout and apply the stored focus info on focusin. E.g.:

var oFocusDelegate = {
  mFocusInfo: {},
  onfocusin: function(oEvent) {
    var oTextArea = oEvent.srcControl;
    var mFocusInfo = this.mFocusInfo[oTextArea];
    if (mFocusInfo) {
      oTextArea.applyFocusInfo(mFocusInfo);
    }
  },
  onfocusout: function(oEvent) {
    var oTextArea = oEvent.srcControl;
    this.mFocusInfo[oTextArea] = oTextArea.getFocusInfo();
  }
};
// add focus delegate to textareas
// TextArea required from "sap/m/TextArea"
new TextArea().addEventDelegate(oFocusDelegate);

Please see: https://jsbin.com/wusejifili/1/edit?html,output

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
aborjinik
  • 723
  • 3
  • 5
  • +1. Great idea! Maybe we should also emphasize that `applyFocusInfo` and `getFocusInfo` are protected and that app developers should rather consider extending `sap.m.TextArea` instead. – Boghyon Hoffmann May 21 '22 at 16:23
  • Also not sure if `oEvent.srcControl` is part of public APIs – Boghyon Hoffmann May 21 '22 at 16:24
  • Thanks a lot, it works great to track the changes of focus. But how to save and restore the cursor position in textarea? I've tried to use the DOM attributes scrollheight/scrolltop but without success. – Annie W. May 21 '22 at 18:38
  • @AnnieW. Could you elaborate more on "save and restore the cursor position in textarea"? Isn't that what the original question was? – Boghyon Hoffmann May 23 '22 at 15:47
  • it seems for me, that getFocusInfo() and applyFocusInfo() don't get and set the current cursor position. If I add some lines to tab1, switch to tab2 and back to tab1 then the cursor is placed on line 1 and not at the saved last position – Annie W. May 26 '22 at 06:58
  • 1
    @AnnieW. get/applyFocusInfo are working find but I thought that this was only for keyboard handling (tab key). If you want to change the focus on the click event then you should add "onclick" to the event delegate object and run the same onfocusin code e.g. onclick: function(oEvent) { this.onfocusin(oEvent); }; However I would not suggest that, re-positioning the cursor might disturb the user. – aborjinik May 29 '22 at 23:08
  • Thanks a lot for all the helpfull hints. I got something which works as needed replacing the handle onfocusin with onclick, finding the textarea element and calling elem.blur() and elem.focus() Here you can find my coding: https://jsbin.com/sireweyeto/1/edit?html,output Fell free to comment it and help me to code it better. My primary goal was to give the user the possibility to return to the last editing position after switchng to other tab/textarea – Annie W. May 31 '22 at 18:14