React-dnd: Problèmes avec la saisie de texte à l'intérieur du composant déplaçable (Firefox)

Créé le 7 août 2015  ·  5Commentaires  ·  Source: react-dnd/react-dnd

Il y a des problèmes avec les entrées de texte à l'intérieur des composants qui ont l'attribut HTML5 draggable défini sur true dans Firefox (à cause de ce bogue connu ). Je travaille à définir draggable à false dans un gestionnaire onFocus et à le remettre à true dans un gestionnaire onBlur ( comme recommandé ici ), mais react-dnd ne prend pas en charge une telle solution de contournement et l'attribut est immédiatement remis à true .

Étant donné qu'il ne semble pas y avoir de progrès sur ce bogue dans FireFox, y a-t-il de la place pour un shim dans react-dnd pour gérer cela? Je mettrai à jour ce problème si je trouve une bonne solution malgré tout.

bug
Source
picture ntdb

Commentaire le plus utile

Vous devriez pouvoir contourner ce bogue en basculant une variable d'état dans onFocus et onBlur , et en changeant votre fonction render en _not_ call connectDragSource() lors de la saisie :

render() {
  const element = <div><textarea onFocus=... /></div>;
  return this.state.editing ? element : this.props.connectDragSource(element);
}
picture gaearon le 17 sept. 2015
👍4

Tous les 5 commentaires

La racine de ceci pourrait être # 256

ntdb picture ntdb le 7 août 2015

Pour l'instant, je travaille sur un fork qui me permet de gérer l'attribut draggable directement dans mon application.

ntdb picture ntdb le 7 août 2015

Merci. Je suis actuellement occupé avec d'autres projets.
Si l'un de ces PR vous aide, faites-le moi savoir aussi: https://github.com/gaearon/react-dnd/pulls

gaearon picture gaearon le 7 août 2015

N'oubliez pas que le backend HTML5 n'est inclus que pour des raisons de commodité.
Vous pouvez publier votre version fixe sur NPM (c'est un seul fichier) mais toujours utiliser le référentiel principal pour tout le reste.

gaearon picture gaearon le 7 août 2015

Vous devriez pouvoir contourner ce bogue en basculant une variable d'état dans onFocus et onBlur , et en changeant votre fonction render en _not_ call connectDragSource() lors de la saisie :

render() {
  const element = <div><textarea onFocus=... /></div>;
  return this.state.editing ? element : this.props.connectDragSource(element);
}
gaearon picture gaearon le 17 sept. 2015
👍4
Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

redochka picture redochka  ·  3Commentaires
djeremh picture djeremh  ·  3Commentaires
dreamcog picture dreamcog  ·  4Commentaires
vickyvxr picture vickyvxr  ·  3Commentaires
rubayethossain picture rubayethossain  ·  3Commentaires