Autor Zpráva
Asbe
Profil
Ahoj máme problém s Reactem, klientovi jsme vytvořili pár formulářů, ale prý po vložení údajů je nelze uložit nebo se uloží jen část zadaných znaků. Nám všem vkládání dat přes formulář funguje a žádný error to nehází. Takže trochu tápáme, čím by to mohlo být. Klient má Javascript povolen, testujem v anonymním okně ve všech klasických prohlížečích bez problému u klienta v těch stejných s tímhle problémem. Nejdříve jsme mysleli, že je problém v handleru- na keyup se zapisovali znaky z inputu do state v reactu, zde nás napadlo, že by to na pomalejších strojích nemuselo fungovat, proto jsme dali handler pryč, ale problém přetrvává. Kdyby někoho napadlo, čím by to mohlo být, tak budu fakt zavázán :)

jo a kleint má čerstvě nainstalovanej komp bez jakýchkoli pluginů v prohlížeči.

Projevují se konrétně 2 typy chyb:
1) V případě 2 inputů píšu text do prvního a po dopsání a překliknutí do druhého mi to odmaže (většinou 1) znak z předchozího inputu
2) Do obou inputů napíšu text: 123456789 (ten text bez problémů vidím) - odešlu formulář a v consoli vidím, že se odeslal opět text o většinou 1 (poslední) znak kratší
http://s14.postimg.org/6szsk6icf/image003.jpg
_es
Profil
Asbe:
Z dodaných informácií asi nikto riešenie problému nevyveští.
Radek9
Profil
Asbe:
Prosím o kód a živou ukázku.
Chamurappi
Profil
Reaguji na Asbe:
React má být tohle? Příště dodej aspoň odkaz na knihovnu, kterou používáš, když už nedáš přímo živou ukázku svého problému.

Takže trochu tápáme, čím by to mohlo být.
Rozlož si problém na jednotlivé stavební části a nemusíš hádat.

Chybová hláška v Chromu na obrázku zjevně říká, že activeElement.attachEvent není funkce, hm… OK, podíváme se na odkazovaný řádek 1258:
  activeElement.attachEvent('onpropertychange', handlePropertyChange);
To vypadá jako kód pro starší Explorer. A skutečně i funkce startWatchingForValueChange, ve které to je, má nad sebou komentář, že je to (For old IE.). Odkudpak je volaná…
  if (topLevelType === topLevelTypes.topFocus) {
    stopWatchingForValueChange();
    startWatchingForValueChange(topLevelTarget, topLevelTargetID);
  } else if (topLevelType === topLevelTypes.topBlur) {
    stopWatchingForValueChange();
  }
… z funkce handleEventsForInputEventIE. A odkud je ta volaná…
      if (isInputEventSupported) {
        getTargetIDFunc = getTargetIDForInputEvent;
      } else {
        getTargetIDFunc = getTargetIDForInputEventIE;
        handleEventFunc = handleEventsForInputEventIE;
      }
… zajímavé. Dost naivní. Co to je za divnou logiku, že když není podporovaná událost input, tak se má používat attachEvent? To je přeci postavené na hlavu. Ještě se tedy podíváme, jak se naplňuje isInputEventSupported:
var isInputEventSupported = false;
if (ExecutionEnvironment.canUseDOM) {
  // IE9 claims to support the input event but fails to trigger it when
  // deleting text, so we ignore its input events
  isInputEventSupported = isEventSupported('input') && (
    (!('documentMode' in document) || document.documentMode > 9)
  );
}
… OK, tak canUseDOM je určitě true a document.documentMode by také neměl hodnotu znegovat (doporučuji pro jistotu ověřit u klienta, zda u něj documentMode neexistuje nebo je větší než 9). Mrkneme se, jak vypadá isEventSupported:
var isEventSupported = _dereq_(136);
… hm, to fakt pomohlo. Já myslel, že koukám na čitelnou verzi skriptu, ve které se lze snadno vyznat. S trochou nejistoty bych si tipnul, že ta stotřicetšestka vrací funkci definovanou kousek kdesi vespod, která po vyházení pro nás nepodstatných kousků vypadá takto:
function isEventSupported(eventNameSuffix, capture) {
  var eventName = 'on' + eventNameSuffix;
  var isSupported = eventName in document;
  if (!isSupported) {
    var element = document.createElement('div');
    element.setAttribute(eventName, 'return;');
    isSupported = typeof element[eventName] === 'function';
  }
  return isSupported;
}
… a to už jsme na konci našeho bádání. Co vrací u klienta "oninput" in document? Pokud vrací false, co vrací ten druhý postup, tedy vytvoření <div>u, nastavení atributu oninput="return;" a zjištění typeof element.oninput == "function"? Pokud vrací také false, není jeho prohlížeč podporovaný Reactem.

Druhá chybová hláška se týká řádku:
  delete activeElement.value;
… ve funkci stopWatchingForValueChange, která je také určená pro starší Explorer a její volání jsem už uváděl výše. Stejná příčina.
Asbe
Profil
zkusím zařídit živou ukázku
_es
Profil
Asbe:
Podľa [#4] bude asi vhodné aj zistiť presnú verziu prehliadača u klienta, či tam nie je niečo prenastavené a pod.
Asbe
Profil
ukázku se mi nepodařilo zařídit ale zjistili jsme (jak psal Chamurappi), že se v knihovně reactu využíval pro FF a chrome kód pro starý IE - facebook nás ale pěkně setřel.. nevím co si o tom myslet :) https://github.com/facebook/react/issues/4812

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: