Up/Down arrow doesn't work in bootstrap modal about rich_textarea HOT 11 CLOSED

You're loading rich_textarea into the modal?

from rich_textarea.

I created a div inside the modal, and I'm loading with $('#RICH_TEXTAREA').rich_textarea()

It's important to tell that all resources of component is working (like mentions, hashtag)

from rich_textarea.

Do all the other major browsers exhibit the same behavior?

Which version of bootstrap?

from rich_textarea.

It's working at IE and Firefox.

I'm using the v2.X of bootstrap

from rich_textarea.

hmmm. It's been quite a while since I've looked at bootstrap 2. There was the issue in jquery.ui that was preventing up and down arrows from working on Firefox. I don't know if they fixed that one.

Turn debugging on and check the console. Are the keyup/keydown events even getting triggered? It's possible bootstrap is intercepting them.

from rich_textarea.

I tried the Firefox solution, but it doesn't working.

I catch the log:

ddt.js:100 focus(): top
ddt.js:100 _onKeyDown(): with key '38' event: i.Event {originalEvent: KeyboardEvent, type: "keydown", isDefaultPrevented: function, timeStamp: 1420228340898, jQuery1820517243591370061: true…}
ddt.js:100 source(): got source event
ddt.js:100 _getCaretPosition(): top
ddt.js:100 _checkForTrigger(): current caret position is 2
ddt.js:100 _isTrigger(): Not a zero width space. Is it a space character?
ddt.js:100 _isTrigger(): checking '6' for trigger char
ddt.js:100 _isTrigger(): '6' not a trigger char.
ddt.js:100 _isTrigger(): skipping zero width space character
ddt.js:100 _isTrigger(): top of loop, caret_position is '-1' previousSibling is: "​"
ddt.js:100 _isTrigger(): moving to previousSibling length '0'
ddt.js:100 _isTrigger(): skipping zero width space character
ddt.js:100 _isTrigger(): top of loop, caret_position is '-1' previousSibling is:
?
ddt.js:100 _isTrigger(): previousSibling is NOT a text node.
ddt.js:100 _isTrigger(): not a trigger
ddt.js:100 source(): no trigger
ddt.js:100 _onKeyUp(): with key '38': i.Event {originalEvent: KeyboardEvent, type: "keyup", isDefaultPrevented: function, timeStamp: 1420228340974, jQuery1820517243591370061: true…}
ddt.js:100 _handleRangeSelection(): checking range for mult-char selection: Range {commonAncestorContainer: text, collapsed: true, endOffset: 2, endContainer: text, startOffset: 2…}
ddt.js:100 _saveRange(): before save currentRange: Range {commonAncestorContainer: text, collapsed: true, endOffset: 2, endContainer: text, startOffset: 2…}
ddt.js:100 _saveRange(): current selection is Selection {type: "Caret", extentOffset: 2, extentNode: text, baseOffset: 2, baseNode: text…}
ddt.js:100 _saveRange(): saving currentRange: Range {commonAncestorContainer: text, collapsed: true, endOffset: 2, endContainer: text, startOffset: 2…}
ddt.js:100 _highlightObject(): top with this $.widget.$.(anonymous function).(anonymous function) {element: i.fn.i.init[1], uuid: 3, eventNamespace: ".rich_textarea3", options: Object, bindings: i.fn.i.init[1]…}
ddt.js:100 _highlightObject(): checking for prev object
ddt.js:100 _getCaretPosition(): top
ddt.js:100 _checkForAdjacentObject(): looking in direction 'left' current node is : "​6"
ddt.js:100 _treeWalker(): top searching 'left' caret_position '2' current node: "​6"
ddt.js:100 _treeWalker(): we have a text node with contents '?6' and caret_position '2'
ddt.js:100 _walkTextNode(): direction 'left' starting with char is '' at position '2' length '2' parent is : <div id=?"campoXMLWebService" contenteditable=?"true" class=?"content_entry ui-autocomplete-input ui-autocomplete-loading" style=?"display:? block" autocomplete=?"off">?…??
ddt.js:100 _walkTextNode(): top of left loop, char is '' at position '2' length '2'
ddt.js:100 _walkTextNode(): Not a zero width space at position '2' is a '54'
ddt.js:100 _treeWalker(): walkTextNode() returned: Object {dom_node: text, offset: 2, type: "text", preventDefault: false, checkForObjects: false}
ddt.js:100 _treeWalker(): _walkTextNode() returned a textnode
ddt.js:100 _treeWalker(): _walkTextNode() returned a normal text node
ddt.js:100 _checkForAdjacentObject(): _treeWalker returned: Object {dom_node: text, offset: 2, type: "text", preventDefault: false, checkForObjects: false}
ddt.js:100 _checkForAdjacentObject(): _treeWalker returned a text node with offset '2'
ddt.js:100 _highlightObject(): checking for next object
ddt.js:100 _getCaretPosition(): top
ddt.js:100 _checkForAdjacentObject(): looking in direction 'right' current node is : "​6"
ddt.js:100 _treeWalker(): top searching 'right' caret_position '2' current node: "​6"
ddt.js:100 _treeWalker(): we have a text node with contents '?6' and caret_position '2'
ddt.js:100 _walkTextNode(): direction 'right' starting with char is '' at position '2' length '2' parent is : <div id=?"campoXMLWebService" contenteditable=?"true" class=?"content_entry ui-autocomplete-input ui-autocomplete-loading" style=?"display:? block" autocomplete=?"off">?…??
ddt.js:100 _walkTextNode(): we are at the end of the string.
ddt.js:100 _walkTextNode(): moving to nextSibling
ddt.js:100 _walkTextNode(): zero length textnode encountered
ddt.js:100 _walkTextNode(): we are at the end of the string.
ddt.js:100 _walkTextNode(): moving to nextSibling
ddt.js:100 _walkTextNode(): zero length textnode encountered
ddt.js:100 _walkTextNode(): we are at the end of the string.
ddt.js:100 _walkTextNode(): moving to nextSibling
ddt.js:100 _walkTextNode(): zero length textnode encountered
ddt.js:100 _walkTextNode(): we are at the end of the string.
ddt.js:100 _walkTextNode(): moving to nextSibling
ddt.js:100 _walkTextNode(): zero length textnode encountered
ddt.js:100 _walkTextNode(): we are at the end of the string.
ddt.js:100 _walkTextNode(): moving to nextSibling
ddt.js:100 _walkTextNode(): zero length textnode encountered
ddt.js:100 _walkTextNode(): we are at the end of the string.
ddt.js:100 _walkTextNode(): end of container found : #text
ddt.js:100 _walkTextNode(): end of editable div
ddt.js:100 _treeWalker(): walkTextNode() returned: Object {dom_node: text, offset: 0, type: "end", preventDefault: false, checkForObjects: false}
ddt.js:100 _treeWalker(): at end of editable div
ddt.js:100 _checkForAdjacentObject(): none found
ddt.js:100 _getCaretPosition(): top
ddt.js:100 _clickedOnObject(): got current node : "​6"
ddt.js:100 _clickedOnObject(): checking parent node : <div id=?"campoXMLWebService" contenteditable=?"true" class=?"content_entry ui-autocomplete-input ui-autocomplete-loading" style=?"display:? block" autocomplete=?"off">?…??
ddt.js:100 _clickedOnObject(): user did not click on an object

from rich_textarea.

What content do you have in the text area?

from rich_textarea.

Do the up and down arrows work if you just load the demo page? (i.e. checking that it works as it should outside of a bootstrap modal)

from rich_textarea.

I tried different content and it doesn't work.

In the demo page works fine. I tried to move the code outside of modal and it worked.

So the problem occurred when I have the Rich TextArea inside the bootstrap modal

from rich_textarea.

It's important to say that if I put a div with contenteditable and not load the rich_textarea() the arrow keys work perfectly

from rich_textarea.

I think this is a bootstrap 2 conflict. It works with Bootstrap 3.

from rich_textarea.