React-dnd: Masalah dengan input dan textarea di dalam komponen draggable

Hal ini disebabkan oleh pendaftaran acara selectstart , yang tampaknya hanya diperlukan untuk kompatibilitas IE.
Jika seperti saya, Anda tidak memerlukan kompatibilitas IE, berikut adalah perbaikan cepat saya yang mungkin berhasil untuk Anda:
https://github.com/dperetti/react-dnd/commit/06f74ef97e07a9a24c10eab8593f3e2121d4f2ed

Terima kasih telah melaporkan! Saya senang menerima PR yang memperbaiki ini.

Saya memiliki dua persyaratan:

• Itu masih perlu memperbaiki IE.
• Harap verifikasi apakah preventDefault() diperlukan untuk browser lain. Saya pikir ini mencegah pemilihan teks apa pun yang Anda coba seret. Jika itu memang membantu mencegah seleksi yang tidak diinginkan di browser lain, Anda mungkin ingin mengelilingi e.preventDefault() dengan beberapa cek a la e.target.tagName !== 'input' (tapi yang lebih cerdas).

Bug yang sama dengan <div contentEditable={isEditing} /> .
Juga saya tidak bisa mengeditnya. Ctrl+A dan Shift + Arrows tidak berfungsi.

Dalam tiga minggu ke depan saya akan sibuk dan saya tidak punya waktu untuk memperbaikinya.
Seperti yang saya katakan, saya senang menerima PR dengan perbaikan seperti yang dijelaskan di https://github.com/gaearon/react-dnd/issues/178#issuecomment -108110202.

Sedang mencari ini. Jika saya mengomentari seluruh tubuh fungsi handleSelectStart , semuanya bekerja seperti yang diharapkan. Menguji ini di IE11 dan tampaknya bagus di sana juga.

@gaearon tahukah Anda jika ada kasus penggunaan atau penyiapan tertentu yang mengapa acara perlu ditangani sama sekali? IE10? Setup berbeda dari textarea / input dalam node yang bisa diseret? Saya tidak mendapatkan masalah pemilihan teks, dan saya bertanya-tanya apakah CSS user-select bekerja di atas preventDefault jika perlu.

Masalah aslinya adalah https://github.com/gaearon/react-dnd/issues/128.
Jika Anda dapat menyiapkan PR yang memperbaiki masalah, tetapi juga membuat https://github.com/gaearon/react-dnd/issues/128 berfungsi, itu akan sangat membantu.

Akan melihat apakah saya bisa memeriksanya. Perlu mencari cara untuk menyiapkan kasus uji sederhana untuk IE9.

Saya pikir sortable-simple contoh gagal di IE9 sebelum # 128 diperbaiki.

@ Gaearon Ya itu contoh yang bagus untuk digunakan, terima kasih. Beberapa catatan:

1. Tidak ada browser lain (Chrome, Safari, FF, dan IE 11 terbaru yang diuji) yang peduli tentang ini. Acara tersebut tidak perlu ditangani sama sekali.
2. IE9 hanya tampak _membutuhkan_ panggilan e.target.dragDrop() . Menonaktifkan pemilihan teks dapat dilakukan dengan membuat pegangan yang menutupi seluruh draggable, membungkus node draggable di connectDragPreview dan pegangan di connectDragSource . Meskipun ini mungkin terdengar buruk, AFAIK Anda tidak secara resmi mendukung IE9 jadi apakah itu solusi yang masuk akal, terutama ketika masalah lain mungkin muncul di browser itu?
3. Poin nomor dua juga berguna jika Anda memiliki input teks di dalam draggable. Pengguna tidak dapat memilih teks dengan menyeret mouse mereka jika connectDragSource diterapkan di seluruh node (akhirnya menyeret node alih-alih memilih teks), namun menerapkan ke pegangan tak terlihat yang merupakan ukuran seluruh node bekerja dengan sangat baik.

Tidak yakin bagaimana Anda ingin menangani ini. Tanpa menggunakan pemeriksaan UA, saya tidak tahu bahwa ada cara yang bagus untuk menangani hal ini dan bagi saya sepertinya itu menambahkan fungsionalitas untuk mendukung browser yang didukung secara tidak resmi yang merusak browser yang baik yang mungkin akhirnya menggali lubang pemeliharaan. Tapi itu semua pendapat saya. Terlepas dari itu, ada solusi untuk masalah ini yang juga menyelesaikan masalah lain.

Menghapus event listener untuk selectstart membuat contentEditable berfungsi di Chrome, tetapi tetap tidak berfungsi di Safari.

Diperbaiki oleh https://github.com/gaearon/react-dnd/commit/0a36033693868a7985ea2348105da4fb2cef8a00.

Menghapus event listener untuk selectstart membuat contentEditable berfungsi di Chrome, tetapi tetap tidak berfungsi di Safari.

Ini adalah masalah API seret dan lepas HTML5 di Safari. Tidak ada yang bisa kita lakukan tentang itu.

Perbaikan untuk masalah ini dirilis di [email protected] .
Harap verifikasi bahwa itu berfungsi.

Dikonfirmasi bahwa Ctrl / Cmd-A berfungsi di <input> di dalam komponen yang dapat diseret.

Mencoba memilih input atau konten textarea dengan touchpad / mouse mulai menyeret elemen induk

Saya melihat ini belum diperbaiki, buat masalah baru?

Elemen dengan set contentEditable di dalam wadah induk yang dapat diseret tidak akan memungkinkan saya untuk memilih teks atau berinteraksi dengannya dengan cara apa pun. Setelah beberapa penggalian, saya menemukan laporan bug ini: https://bugs.chromium.org/p/chromium/issues/detail?id=170139

Tampaknya Chrome telah memperbaiki masalah tersebut. Sementara itu, perilaku Safari dapat diperbaiki dengan CSS:

.contenteditable-element {
  user-select: text;
}

@trevorsmith Ini masih belum memperbaiki perilaku Firefox. Apakah Anda tahu solusi untuk Firefox?

@ rahul1995 - Saya baru saja menemukan solusi: simpan saja ref ke simpul DOM yang dapat diseret dan ketika pengguna memfokuskan input / area teks setel atribut yang dapat diseret ke false :

const Test = () => {
  const ref = useRef(null);
  const [focused, setFocused] = useState(false);
  const [_, drag] = useDrag({ item: { type: 'test' } });

  useEffect(() => {
    if (ref.current) {
      ref.current.setAttribute('draggable', !focused);
    }
  }, [focused]);

  return drag(
    <textarea ref={ref} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}></textarea>
  );
};

Ini harus melakukan trik untuk Firefox: wink: