2

you can see in the attached codepen a scenario that causes chrome to hang, the only way to get around it is to close the tab.
this also happens in an electron project i have so this is not specific to chrome.

steps to reproduce:
1. have a textarea with dir="auto" and a placeholder and 1 character in Hebrew
2. focus on the textarea and hit the right and left arrows
3. chrome hangs forever 

<textarea dir="auto" cols="5" rows="3" placeholder="write something">ע</textarea>

happy to hear of ideas to get arround this bug till google fixes it(reported it)

Edit
the problem is even worse then i thought, doesn't matter if you have a placeholder, if dir="auto" and there is one Hebrew letter in an English string, navigating with the arrows will crash chrome when you get to the Hebrew letter(you can paste dגd and see).
if you add two Hebrew letters (like aaaגגbbb) and navigate with the arrows it will not crash but will behave really strange, entering some sort of a cursor loop between the Hebrew letters
Please star this bug here https://bugs.chromium.org/p/chromium/issues/detail?id=625739

Edit 2
chromium team fixed the bug and the fix is already on Canary :)

Edit 3 The fix is now live on Chrome 52 you can use this to check the chrome varsion and disable the left arrow key

Community
  • 1
  • 1
Avi Pinto
  • 4,266
  • 2
  • 24
  • 24

1 Answers1

0

The "solution" i chose is to disable the left arrow key if shift is not pressed and if the textarea contains rtl characters. updated the code here http://codepen.io/avipinto/pen/kXwBWq

here is the code:

var rtlPattern =/[\u0590-\u085F,\u08A0-\u08FF,\uFB1D-\uFEFF]|\uD802[\uDC40-\uDFFF]|\uD803[\uDC00-\uDCFF]|\uD803[\uDE60-\uDE7F]|\uD83B[\uDE00-\uDEFF]/;    
$(document).on("keydown","textarea",function(event){
   if (!event.shiftKey && (event.keyCode === 37))
   {
     if(this.value && rtlPattern.test(this.value))
     { 
       event.preventDefault();
     }
   }
});

got to this pattern the following way:

//Unicode Ranges
// \u0590-\u05FF Hebrew
// \u0600-\u06FF Arabic
// \u0700-\u074F Syriac
// U+0750-U+077F Arabic Supplement
// U+0780-U+07BF Thaana Letter Paviyani
// U+07C0-U+07FF NKo
// U+0800-U+083F Samaritan
// U+0840-U+085F Mandaic
//--------------------
// U+08A0-U+08FF Arabic Extended-A
//--------------------
// U+FB1D-U+FB4F Alphabetic Presentation Forms  (part of it)
// U+FB50-U+FDFF Arabic Pres. Forms-A
// U+FE70-U+FEFF Arabic Pres. Forms-B
//--------------------
// U+10840-U+1085F Imperial Aramaic
// U+10860-U+1087F Palmyrene
// U+10880-U+108AF Nabataean
// U+108E0-U+108FF Hatran
// U+10900-U+1091F Phoenician
// U+10920-U+1093F Lydian
// U+10980-U+1099F Meroitic Hieroglyphs
// U+109A0-U+109FF Meroitic Cursive
// U+10A00-U+10A5F Kharoshthi 
// U+10A60-U+10A7F Old South Arabian
// U+10A80-U+10A9F Old North Arabian
// U+10AC0-U+10AFF Manichaean
// U+10B00-U+10B3F Avestan 
// U+10B40-U+10B5F  Inscriptional Parthian
// U+10B60-U+10B7F Inscriptional Pahlavi
// U+10B80-U+10BAF Psalter Pahlavi
// U+10C00-U+10C4F Old Turkic 
// U+10C80-U+10CFF Old Hungarian
// the top range is calculated by https://github.com/mathiasbynens/regenerate :
//  console.log(regenerate().addRange(0x10840,0x10CFF).toString());
//  > \uD802[\uDC40-\uDFFF]|\uD803[\uDC00-\uDCFF]
//-----------------------------------------
// U+10E60-U+10E7F Rumi Numeral Symbols
//  console.log(regenerate().addRange(0x10E60,0x10E7F).toString());
//  > \uD803[\uDE60-\uDE7F]
//-----------------------------------------
// U+1EE00-U+1EEFF Arabic Mathematical Alphabetic Symbols
//  console.log(regenerate().addRange(0x1EE00,0x1EEFF).toString());
//   > \uD83B[\uDE00-\uDEFF]
Avi Pinto
  • 4,266
  • 2
  • 24
  • 24