Enterprise: Tab: Iframe diinisialisasi ulang pada penambahan/penghapusan tab

Saya tidak mengikuti cara mereproduksi masalah ini bahkan dengan video? Apa itu mms001? Kedengarannya seperti masalah pengkodean aplikasi?

Apakah itu ada hubungannya dengan acara tab? https://master-enterprise.demo.design.infor.com/components/tabs/example-activated-event.html atau apa yang Anda lakukan dengan tab khusus di sini?

Bisakah Anda meluangkan sedikit waktu pada kasus uji yang dikurangi atau melihat apakah ada cara untuk melihat ini dalam contoh?

@tmcconechy mms001 adalah aplikasi M3. @marclouisgenedeguzman dapatkah Anda membuat ulang bug ini menggunakan markup di halaman contoh kami yang telah dibagikan Tim? https://master-enterprise.demo.design.infor.com/components/tabs/example-activated-event.html

Ok, Juga Ini adalah contoh terkait yang menunjukkan tab tambah/hapus.
https://master-enterprise.demo.design.infor.com/components/tabs/example-add-tab-button.html

Sepertinya kita harus dapat mereproduksi ini dalam contoh kita tetapi membutuhkan lebih banyak detail.

Melampirkan replikasi pada sampel enterprise-ng

melampirkan kode html
tab-dismissible.demo.txt

Saya tidak yakin apa hubungannya dengan bing. Saya pikir itu mungkin membingungkan saya tentang masalah ini. Tapi sepertinya di video yang terjadi adalah:

a) ketika Anda menutup tab, itu mengaktifkan tab lain (ini tampaknya valid)
b) iframe sedang memuat ulang karena tab disembunyikan dan kemudian ditampilkan

Saya tidak yakin apa yang bisa kami lakukan tentang ini karena kami tidak memiliki kendali atas iframe (dan sangat tidak merekomendasikan menggunakannya).

Mungkin ada cara untuk men-cache konten iframe. Atau mungkin Anda tidak dapat menggunakannya dan memasukkan informasinya ke dalam DOM? Pada dasarnya:

• Jika Anda menggunakan tampilan: tidak ada maka bingkai dimuat ulang
• Jika Anda tidak menginginkannya, gunakan v isibility:hidden atau opacity:0 untuk menyembunyikan bingkai

Kecuali bahwa kami tidak dapat dengan mudah membuat komponen tab menggunakan visibilitas: tersembunyi atau opacity atau akan menyebabkan masalah. Mungkin idenya adalah

• Saat mengaktifkan, pindahkan iframe ke halaman
• Saat menonaktifkan, pindahkan iframe keluar dari tab yang disembunyikan dari halaman?

Pada tinjauan lebih lanjut - saya melihat masalahnya. Itu hanya pada menghapus dan menambahkan tab yang aneh. Aku sedang melihat ini sekarang.

Pembaruan cepat tentang ini adalah bahwa ada "solusi" sederhana karena ada opsi untuk apa yang dilakukannya. Solusinya adalah menambahkan pengaturan "disableAutoUpdatedCall"

<div soho-tabs disableAutoUpdatedCall="true">

Apa yang dilakukan dalam komponen Ng adalah menginisialisasi ulang tab ketika jumlah tab berubah. Ini benar-benar hanya diperlukan ketika jumlah tab berubah saat menggunakan tab dinamis.

Saya mencari "jika" ada solusi yang lebih baik, yang mungkin memerlukan default ini ke true dan beberapa perubahan API tetapi belum yakin tentang ini. Pengaturan ini pasti menyelesaikan kasus ini, jadi cobalah sekarang dan uji. Dan saya akan menyelesaikan penelitian itu besok

Hai @tmcconechy ,

Saya mencoba solusi yang disarankan tetapi tidak bisa membuatnya bekerja. Kasus penggunaan kami adalah dengan membuat tab dinamis dan dapat menutupnya (tanpa berdampak pada tab terbuka lainnya), begitulah cara kami membuat instance program M3 baru, tab baru. Dua masalah yang saya alami saat menerapkan disableAutoUpdateCall="true":

1. Menambahkan tab secara dinamis tidak akan ditampilkan, kecuali Anda menutup menu aplikasi (menghitung ulang tab) dan hal-hal semacam itu.
2. svg dengan ikon tutup hilang saat menambahkan disableAutoUpdateCall="true", meskipun dissmissible="true"
3. Mendapatkan kesalahan saat mencoba menavigasi ke tab dinamis (yang terlihat setelah misalnya menu aplikasi dipicu

.gif menampilkan edisi 1 dan 2.

.img menunjukkan masalah kesalahan 3.

Saya telah membuat modul fitur h5-tabs yang bisa Anda pasang dan mainkan misalnya ng-quickstart:
m3-tabs.zip

1. Ekstrak ke dalam tab src/app/m3
2. Tambahkan ke impor app.module: []
3. Menambahkan di dalam #maincontent di app.component.html

Akan sangat menghargai jika Anda bisa mendapatkan solusi potensial ini bekerja dalam contoh "sederhana" (hal-hal dinamis tidak pernah benar-benar ada) yang saya berikan.

Terima kasih atas umpan baliknya, tab dinamis adalah apa yang saya lihat. Saya agak berharap Anda tidak perlu mengubahnya dengan cepat karena dua hal ini bertentangan. Saya juga tidak memikirkan masalah ikon. Saya akan terus mencari karena saya memiliki beberapa ide untuk memperbaikinya dengan lebih baik.

Bagus, terima kasih Tim!

@whernebrink saya mendorong PR Anda dapat mencobanya di cabang itu jika Anda mau. Masalahnya umumnya tab perlu diperbarui jika jumlah tab berubah. Jadi setelah Anda memiliki ini, saya telah memberikan ui baru untuk memaksa pembaruan/penyegaran saat "aman".

Jadi Anda perlu
a) Gunakan <div soho-tabs disableAutoUpdatedCall="true"> https://github.com/infor-design/enterprise-ng/pull/930/files#diff-8d10e630a098469d93f796aa77460a4ad30a1bb8890072cf929c486e55950078R4
b) dalam fungsi Anda yang mengubah tab, tambahkan https://github.com/infor-design/enterprise-ng/pull/930/files#diff -11fb6fb3dbc217802abffcc158f358d6034f6e408cbc134dee0d0011a9d690afR68 untuk menyinkronkan tab

Saya berharap ini akan berhasil. Satu-satunya masalah adalah jika Anda karena alasan tertentu perlu mengubah tab dan menjaga iframe tetap sinkron. IE berharap perubahan dinamis tab adalah sesuatu yang Anda lakukan di mana status dapat diatur ulang?

@tmcconechy Terima kasih! Saya mencobanya dan sepertinya berhasil, yaitu menyimpan apa yang dicari. Contoh dengan iframe bukan yang terbaik/paling penting dari pihak kami (sejak 1. tidak yakin ini bahkan harus diizinkan dan 2. tidak yakin berapa banyak ini digunakan saat ini). Tapi itu mudah ditunjukkan. Skenario kehidupan yang lebih baik dan jauh lebih nyata adalah di mana pengguna memiliki datagrid yang telah digulir, dan kemudian ketika Anda menutup atau membuka tab lain, tab akan diperbarui dan Anda akan kehilangan posisi Anda (dan data yang dimuat). Ini akan sulit untuk diatur ulang karena seseorang tidak dapat memastikan bahwa itu tidak diubah di tempat lain.

Namun, saya menganggap perbaikan yang Anda usulkan akan berfungsi dalam kasus datagrid juga. :) Meskipun, tidak yakin kapan akan ada "aman" untuk menggunakan metode penyegaran itu (kapan seseorang ingin memicu penyegaran?). Kami harus mencobanya saat perbaikannya. Namun, satu skenario potensial di masa depan dapat terjadi jika Anda ingin mengurutkan ulang tab, misalnya dengan acara seret. Tindakan ini tidak akan mungkin terjadi tanpa kehilangan konteks?

Sehubungan dengan PR Anda: bolehkah saya menyarankan untuk tidak menghapus [beforeCloseCallback]="onBeforeClose" dari markup di tabs-dissmissible.demo, dan mungkin memberikan beberapa cinta (mengetik panggilan balik di .ts) karena ini baik untuk diketahui kami konsumen (bagaimana misalnya mencegah penghapusan tab).

Pada topik yang sama, ada inkonsistensi dalam SohoTabsEvent yang Anda dapatkan di [beforeCloseCallback]="onBeforeClose" callback dan (activated)="onActivated($event)"

• Event.tab (serta parameter kedua) di beforeCloseCallback mereferensikan <li> dari tab, jadi Anda akan mendapatkan tabId dengan jquery misalnya event.tab.find("a").attr("tabId") sedangkan
• Event.tab di referensi (diaktifkan) sebenarnya <a>
  di mana Anda bisa mendapatkan id melalui event.tab.getAttribute('ng-reflect-tab-id')

Apakah ada alasan untuk "inkonsistensi" ini? Sepertinya saya bahwa event.tab SohotTabsEvent harus selalu mengembalikan "hal" yang sama. Secara pribadi saya lebih suka untuk mendapatkan <a> , jadi orang bisa melakukan .getAttribute() secara langsung.

Maaf untuk esainya... Akhirnya, ini hanya .gif dari masalah datagrid yang disebutkan di atas, visualisasikan saja. Terima kasih lagi.

hai @whernebrink

1) Saya berasumsi ini harus memperbaiki kasing datagrid. Saya mencoba mereproduksinya dan tidak bisa https://github.com/infor-design/enterprise/commit/5e2b066ffeb9cdf2b9ed255e4bd6f1997ea0876e
2) saya kira bagi saya "aman" akan digunakan ketika Anda menukar tab yang ditampilkan? Mungkin mengubah fitur di aplikasi Anda memuat ulang/mengubah tab? Dalam contoh ketika Anda menekan tombol untuk mengubahnya? Tetapi kapan itu benar-benar terjadi dalam kasus Anda, saya tidak tahu.
3) Kami memiliki permintaan untuk menyeret tab yang kami pertimbangkan di sini https://github.com/infor-design/enterprise/issues/4520 kami harus membuatnya berfungsi ...
4) Mengembalikan acara itu .. Tidak bermaksud mengeluarkannya
5) Ya, saya mengerti apa yang Anda maksud tentang ketidakkekalan. Kita bisa mengubah itu. Tetapi bisakah Anda membuat masalah terpisah untuk itu. Ini adalah perubahan (kecil) yang melanggar.

Membuka kembali masalah ini. Saat bekerja dengan @whernebrink kami menemukan kasus tidak berfungsi di mana Anda menambahkan tab melalui array dinamis. Jadi menyelidiki perbaikan yang lebih baik untuk mendukung kasus itu juga.

@whernebrink saya menemukan perbaikan yang masuk akal yang saya dorong ke cabang master dan 4.35.x. Saya juga membuat 7.8.0 (Ng 9.0) dan 8.1.0 (Ng 10) yang saya butuhkan untuk rilis.

JADI, Anda dapat mencoba versi ini di aplikasi Anda atau mengujinya di cabang enterprise-ng master / 8.1.x atau / 7.8.x dengan

• pergi ke http://localhost :4200/ids-enterprise-ng-demo/tabs-dynamic
• pada tab dua cari sesuatu
• coba tutup tab lain -> hasil pencarian tidak boleh disetel ulang
• tekan tombol tambahkan tab baru -> hasil pencarian tidak boleh disetel ulang
• bukan berarti mengklik dua tombol lainnya akan mengatur ulang pencarian tetapi ini akan baik-baik saja karena ini benar-benar tab baru bersih dengan ifames baru

Ini adalah perbaikannya https://github.com/infor-design/enterprise/commit/d168b78454c4c800377c7c160775754f36272de5 masalahnya adalah tab ditambahkan kembali ke wadah induk ketika mereka tidak selalu perlu