{"action":"opened","issue":{"url":"https://api.github.com/repos/kangax/fabric.js/issues/1985","labels_url":"https://api.github.com/repos/kangax/fabric.js/issues/1985/labels{/name}","comments_url":"https://api.github.com/repos/kangax/fabric.js/issues/1985/comments","events_url":"https://api.github.com/repos/kangax/fabric.js/issues/1985/events","html_url":"https://github.com/kangax/fabric.js/issues/1985","id":58527472,"number":1985,"title":"Focus craziness on iOS with iText","user":{"login":"KJTsanaktsidis","id":1418177,"avatar_url":"https://avatars.githubusercontent.com/u/1418177?v=3","gravatar_id":"","url":"https://api.github.com/users/KJTsanaktsidis","html_url":"https://github.com/KJTsanaktsidis","followers_url":"https://api.github.com/users/KJTsanaktsidis/followers","following_url":"https://api.github.com/users/KJTsanaktsidis/following{/other_user}","gists_url":"https://api.github.com/users/KJTsanaktsidis/gists{/gist_id}","starred_url":"https://api.github.com/users/KJTsanaktsidis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/KJTsanaktsidis/subscriptions","organizations_url":"https://api.github.com/users/KJTsanaktsidis/orgs","repos_url":"https://api.github.com/users/KJTsanaktsidis/repos","events_url":"https://api.github.com/users/KJTsanaktsidis/events{/privacy}","received_events_url":"https://api.github.com/users/KJTsanaktsidis/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-02-22T23:26:07Z","updated_at":"2015-02-22T23:26:07Z","closed_at":null,"body":"In the current fabric release, typing text in an iText in Chrome causes the window to scroll to the top of the screen. In order to fix this, I cherry picked https://github.com/kangax/fabric.js/commit/b716a56e2cbbaa3c53fab9a3ed4fa9459b93045e into my copy of fabric.js. This fixed the focus issue on Chrome, but led to even worse things on iOS.\r\n\r\nWith the above cherry picked into my fabric, typing in iText on iOS causes the window to scroll to the bottom of the screen. This is because the textarea is `position: fixed;`, which on iOS allows the page to scroll behind the position fixed thing.\r\n\r\nTo fix this in our project, I have duck-punched window.fabric.iText.prototype.initHiddenTextarea to put the hidden textarea at the same vertical position as the iText. When the iText moves relative to the DOM for whatever reason, the position of the hidden textarea should be updated.\r\n\r\nMy monkey patch looks like this.\r\n```javascript\r\n//Apply violence to the stupid hidden input stuff to make iOS show the keyboard\r\n\r\n(function(){\r\n    var __initHiddenTextarea = window.fabric.IText.prototype.initHiddenTextarea;\r\n\r\n    function initHiddenTextarea(){\r\n        this.hiddenTextarea = fabric.document.createElement('textarea');\r\n\r\n        this.hiddenTextarea.setAttribute('autocapitalize', 'off');\r\n        this.hiddenTextarea.style.cssText = 'position: absolute; opacity: 0; font-size: 1pt;' +\r\n                                            ' left: -9999px; width: 8888px; height: 10px; z-index: -999;';\r\n        if (this.canvas && this.canvas.wrapperEl) {\r\n            this.canvas.wrapperEl.appendChild(this.hiddenTextarea);\r\n\r\n            this.on('event:scaling', this.canvas.updateHiddenTextareaPosition.bind(this.canvas));\r\n            this.on('event:moving', this.canvas.updateHiddenTextareaPosition.bind(this.canvas));\r\n            this.canvas.updateHiddenTextareaPosition();\r\n        } else {\r\n            fabric.document.body.appendChild(this.hiddenTextarea);\r\n        }\r\n\r\n        //This was in the original initHiddenTextarea\r\n        fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this));\r\n        fabric.util.addListener(this.hiddenTextarea, 'keypress', this.onKeyPress.bind(this));\r\n        fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this));\r\n        fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.bind(this));\r\n\r\n        if (!this._clickHandlerInitialized && this.canvas) {\r\n          fabric.util.addListener(this.canvas.upperCanvasEl, 'click', this.onClick.bind(this));\r\n          this._clickHandlerInitialized = true;\r\n        }\r\n    }\r\n\r\n    //We need to slap this on fabric, so that if we do something to change the position of the\r\n    //textarea on the screen by e.g. resizing or zooming the canvas, we can move the hidden\r\n    //textarea appropriately.\r\n    function updateHiddenTextareaPosition() {\r\n        //The text's bounding rectangle, IN CANVAS SPACE (not fabric logical coordinates)\r\n        var itextObject = this.getActiveObject();\r\n        if (itextObject && itextObject.isEditing) { //If not iText, will return false\r\n            if (itextObject.hiddenTextarea.parentNode === this.wrapperEl) {\r\n                var rect = itextObject.getBoundingRect();\r\n                itextObject.hiddenTextarea.style.top = rect.top + 'px';\r\n            }\r\n        }\r\n    }\r\n\r\n    window.fabric.util.object.extend(window.fabric.IText.prototype, {\r\n        initHiddenTextarea: initHiddenTextarea,\r\n    });\r\n\r\n    window.fabric.util.object.extend(window.fabric.Canvas.prototype, {\r\n        updateHiddenTextareaPosition: updateHiddenTextareaPosition,\r\n    });\r\n})();\r\n```\r\n\r\nThis seems to be working for me as expected. My questions are twofold.\r\n- Are there any other circumstances in which `canvas.updateHiddenTextareaPosition()` will need to be called? Zooming comes to mind, but I'm not sure what the right events are to listen on.\r\n- Is this an approach which the fabric maintainers agree with? If so, I'm happy to convert this into a proper PR"}}