React-dnd: Problemas com entrada de texto dentro do componente arrastável (Firefox)

Criado em 7 ago. 2015  ·  5Comentários  ·  Fonte: react-dnd/react-dnd

Existem problemas com entradas de texto dentro de componentes que têm o atributo HTML5 draggable definido como true no Firefox (devido a este bug conhecido ). Estou trabalhando para definir draggable para false em um manipulador onFocus e configurá-lo de volta para true em um manipulador onBlur ( como recomendado aqui ), mas react-dnd não tem suporte para tal solução alternativa e o atributo é imediatamente definido de volta para true .

Dado que não parece haver progresso neste bug no FireFox, há espaço para um shim no react-dnd para lidar com isso? Vou atualizar esse problema se encontrar uma boa solução de qualquer maneira.

bug
Fonte
picture ntdb

Comentários muito úteis

Você deve ser capaz de contornar esse bug alternando uma variável de estado em onFocus e onBlur , e alterando sua função render para _not_ chamar connectDragSource() durante a entrada :

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

Todos 5 comentários

A raiz disso pode ser # 256

ntdb picture ntdb em 7 ago. 2015

Por enquanto, estou trabalhando em uma bifurcação que me permite gerenciar o atributo draggable diretamente no meu aplicativo.

ntdb picture ntdb em 7 ago. 2015

Obrigado. Atualmente estou ocupado com alguns outros projetos.
Se algum desses PRs ajudar você, me informe também: https://github.com/gaearon/react-dnd/pulls

gaearon picture gaearon em 7 ago. 2015

Não se esqueça de que o back-end HTML5 está incluído apenas por conveniência.
Você pode publicar sua versão corrigida no NPM (é um único arquivo), mas ainda usar o repositório principal para todo o resto.

gaearon picture gaearon em 7 ago. 2015

Você deve ser capaz de contornar esse bug alternando uma variável de estado em onFocus e onBlur , e alterando sua função render para _not_ chamar connectDragSource() durante a entrada :

render() {
  const element = <div><textarea onFocus=... /></div>;
  return this.state.editing ? element : this.props.connectDragSource(element);
}
gaearon picture gaearon em 17 set. 2015
👍4
Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

gocreating picture gocreating  ·  4Comentários
dant00ine picture dant00ine  ·  3Comentários
redochka picture redochka  ·  3Comentários
croraf picture croraf  ·  3Comentários
yaoyuande picture yaoyuande  ·  3Comentários