Enterprise: Guias: Iframe reinicializado ao adicionar / remover guias

Não estou entendendo como reproduzir esse problema mesmo com o vídeo? O que é mms001? Parece um problema de codificação do aplicativo?

Tem algo a ver com eventos de guia? https://master-enterprise.demo.design.infor.com/components/tabs/example-activated-event.html ou o que você está fazendo com as guias especificamente aqui?

Você poderia gastar um pouco de tempo em um caso de teste reduzido ou ver se há uma maneira de ver isso nos exemplos?

@tmcconechy mms001 é um aplicativo M3. @marclouisgenedeguzman você pode recriar esse bug usando a marcação em nossas páginas de exemplos que Tim compartilhou? https://master-enterprise.demo.design.infor.com/components/tabs/example-activated-event.html

Ok, também Este é um exemplo relacionado que mostra as guias adicionar / remover.
https://master-enterprise.demo.design.infor.com/components/tabs/example-add-tab-button.html

Parece que devemos ser capazes de reproduzir isso em nossos exemplos, mas precisamos de mais detalhes.

Anexando replicação na amostra enterprise-ng

anexando código html
tabs-CC0ible.demo.txt

Não tenho certeza do que isso tem a ver com bing. Acho que isso está me confundindo sobre esse assunto. Mas parece que no vídeo o que está acontecendo é:

a) quando você fecha uma guia, ela ativa outra guia (parece válido)
b) o iframe está recarregando porque a guia foi ocultada e exibida

Não tenho certeza do que podemos fazer sobre isso, pois não temos nenhum controle sobre o iframe (e altamente não recomendo usá-los).

Talvez haja uma maneira de armazenar em cache o conteúdo do iframe. Ou talvez você não consiga utilizá-los e colocar as informações no DOM? Basicamente:

• Se você usar display: none , o quadro será recarregado
• Se você não quiser isso, use visibilidade: oculto ou opacidade: 0 para ocultar a moldura

Exceto que não podemos fazer com que o componente guia use visibilidade: oculto ou opacidade ou isso causará problemas. Talvez uma ideia seja

• Ao ativar, mova o iframe para a página
• Ao desativar, mover o iframe para fora da guia oculta da página?

Em uma análise mais aprofundada - eu vejo o problema. Ele só faz isso ao excluir e adicionar a guia, o que é estranho. Estou olhando para isso agora.

Uma atualização rápida sobre isso é que há uma "solução alternativa" simples, pois há uma opção para o que está fazendo. A solução alternativa é adicionar a configuração "disableAutoUpdatedCall"

<div soho-tabs disableAutoUpdatedCall="true">

O que isso está fazendo no componente Ng é reinicializar as guias quando a contagem de guias muda. Isso é realmente necessário apenas quando a contagem de guias muda ao usar guias dinâmicas.

Estou procurando "se" houver uma solução melhor, que pode exigir que isso seja verdadeiro e algumas alterações de API, mas não tenho certeza sobre isso ainda. Esta configuração definitivamente resolve este caso, então experimente agora e teste. E eu vou terminar essa pesquisa amanhã

Olá @tmcconechy ,

Tentei a solução alternativa sugerida, mas não consigo fazê-la funcionar. Nosso caso de uso é criar abas dinâmicas e poder fechá-las (sem causar impacto nas outras abas abertas), é assim / onde instanciamos novas instâncias de programas M3, uma nova aba. Dois problemas que estou tendo ao aplicar o disableAutoUpdateCall = "true":

1. Adicionar uma guia dinamicamente não aparecerá, a menos que você feche o menu do aplicativo (recalcula a guia) e coisas assim.
2. O svg com ícones de fechamento são perdidos ao adicionar disableAutoUpdateCall = "true", embora dissmissible = "true"
3. Obtendo um erro ao tentar navegar para a guia dinâmica (que é visível após, por exemplo, o menu do aplicativo ter sido acionado

.gif mostrando os problemas 1. e 2.

.img mostrando problema de erro 3.

Eu criei um módulo de recursos h5-tabs que você pode simplesmente ligar e jogar, por exemplo, ng-quickstart:
m3-tabs.zip

1. Extraia para estar em src / app / m3-tabs
2. Adicionar às importações app.module: []
3. Adicionar dentro de #maincontent em app.component.html

Agradeceria se você pudesse fazer com que essa solução alternativa potencial funcionasse em meu exemplo "simples" fornecido (as coisas dinâmicas na verdade nunca são).

Obrigado pelo feedback, as guias dinâmicas eram o que eu estava olhando ainda. Eu meio que esperava que você não precisasse mudá-los na hora, pois essas duas coisas entram em conflito. Também não pensei no problema do ícone. Vou continuar procurando, pois tenho algumas ideias para corrigir isso melhor.

Ótimo, obrigado Tim!

@whernebrink Eu empurrei um PR, você pode experimentar nesse branch, se quiser. O problema geralmente é que as guias precisam ser atualizadas se a contagem de guias mudar. Assim, uma vez que você tenha isso, eu dei uma nova interface do usuário para forçar a atualização / atualização quando for "segura".

Então você precisaria
a) Use <div soho-tabs disableAutoUpdatedCall="true"> https://github.com/infor-design/enterprise-ng/pull/930/files#diff-8d10e630a098469d93f796aa77460a4ad30a1bb8890072cf929c486e55950078R4
b) em suas funções que alteram as guias, adicione https://github.com/infor-design/enterprise-ng/pull/930/files#diff -11fb6fb3dbc217802abffcc158f358d6034f6e408cbc134dee0d0011a9d690R68 para sincronizar as guias

Eu espero que isso funcione. O único problema é se você, por algum motivo, precisar alterar as guias e manter o iframe sincronizado. Espera que a mudança dinâmica da guia seja algo que você faça e o estado possa ser redefinido?

@tmcconechy Obrigado! Experimentei e parece que está a funcionar, ou seja, mantendo o que procurava. O exemplo com iframe não é o melhor / mais importante de nossa parte (já que 1. não tenho certeza de que isso deve ser permitido em primeiro lugar e 2. não tenho certeza de quanto isso é usado atualmente). Mas foi fácil mostrar. Um cenário melhor e muito mais real é onde o usuário tem um datagrid que foi rolado, e então quando você fecha ou abre outra aba, a aba é atualizada e você perde seu posicionamento (e dados carregados). Isso seria difícil de redefinir, pois não se pode ter certeza de que não foi alterado em nenhum outro lugar.

No entanto, suponho que a correção proposta funcionará no caso de datagrids também. :) Embora não tenha certeza de quando haverá "segurança" para usar esse método de atualização (quando alguém desejaria acionar a atualização?). Teremos que experimentá-lo quando a correção estiver disponível. Um cenário futuro em potencial, entretanto, pode ser se você quiser reordenar as guias, por exemplo, com o evento de arrastar. Esta ação não será possível sem perder o contexto?

Em relação ao seu PR: sugiro não remover [beforeCloseCallback]="onBeforeClose" da marcação em tabs-dissmissible.demo, e talvez dar um pouco de amor (digitações para o retorno de chamada em .ts), pois é bom saber para nós, consumidores (como, por exemplo, evitar o cancelamento da guia).

No mesmo tópico, há uma inconsistência no SohoTabsEvent que você obtém em [beforeCloseCallback] = "onBeforeClose" callback e (enabled) = "onActivated ($ event)"

• O event.tab (bem como o segundo parâmetro) na referência beforeCloseCallback o <li> da guia, então você obteria o tabId com jquery, por exemplo event.tab.find("a").attr("tabId") enquanto
• O event.tab na referência (ativada) do real <a>
  onde você pode obter o id via event.tab.getAttribute ('ng-reflet-tab-id')

Existe uma razão para esta "inconsistência"? Parece-me que o evento SohotTabsEvent.tab deve sempre retornar a mesma "coisa". Pessoalmente, prefiro sempre obter <a> , então pode-se apenas fazer o .getAttribute () diretamente.

Desculpem a redação ... Por fim, aqui está apenas um .gif do problema do datagrid mencionado acima, basta visualizá-lo. Obrigado novamente.

oi @whernebrink

1) Suponho que isso deve corrigir o caso do datagrid. Tentei reproduzi-lo e não consegui https://github.com/infor-design/enterprise/commit/5e2b066ffeb9cdf2b9ed255e4bd6f1997ea0876e
2) Acho que "seguro" seria o caso de uso de quando você troca as guias que são mostradas? Talvez a alteração de um recurso em seu aplicativo recarregue / altere as guias? No exemplo, quando você pressiona os botões para alterá-los? Mas quando isso realmente aconteceu no seu caso, eu não sei.
3) Temos um pedido para arrastar guias que estamos considerando aqui https://github.com/infor-design/enterprise/issues/4520 teremos que fazer isso funcionar ...
4) Reverteu esse evento .. Não tive a intenção de retirá-lo
5) Sim, entendo o que você quer dizer com inconstância. Podemos mudar isso. Mas você pode criar uma questão separada para isso. É uma mudança de ruptura (pequena), embora.

Reabriu este problema. Ao trabalhar com @whernebrink , descobrimos um caso que não funciona, em que você adiciona guias por meio do array dinâmico. Então, investigando uma solução melhor para dar suporte a esse caso também.

@whernebrink eu encontrei uma correção razoável que coloquei nos branches master e 4.35.x. Eu também fiz um 7.8.0 (Ng 9.0) e um 8.1.0 (Ng 10) conforme eu precisava para liberar.

Portanto, você pode experimentar essas versões em seu aplicativo ou testá-lo em ramos enterprise-ng master / 8.1.x ou / 7.8.x por

• indo para http: // localhost : 4200 / ids-enterprise-ng-demo / tabs-dynamic
• na guia dois pesquise algo
• tente fechar outra guia -> os resultados da pesquisa não devem ser redefinidos
• pressione o botão adicionar nova guia -> os resultados da pesquisa não devem ser redefinidos
• não que clicar nos outros dois botões irá repor a pesquisa mas isto deve funcionar visto que estes são realmente novos separadores com novos ifames

Esta é a correção https://github.com/infor-design/enterprise/commit/d168b78454c4c800377c7c160775754f36272de5 o problema era que as guias estavam sendo reaplicadas ao contêiner pai quando nem sempre precisam ser