Melhores potências filtro autocompletar

Olá minha comunidade!

Em contato com alguns usuários e fazendo uso do filtro autocompletar, reparei que a resposta da busca tem um limite de caracteres habilitados a serem apresentados, o que dificulta a navegação do usuário despretensioso, que não quer encontrar algo exato, mas também dificulta o acesso ao usuário que quer encontrar uma informação exata, já que a busca é feita por parte do código que fica nas casas finais.
Existe a possibilidade da apresentação dos termos na lista suspensa do autocompletar vazar a caixa dos filtros?
De toda e qualquer maneira, me coloco a disposição para questionamentos.
Grata pela atenção
Um forte abraço


Oi Su!

Eu venho tentado fazer isso faz um tempo… É um problema de CSS. A “caixa” onde fica o painel de filtros é um modal (porque precisa ser para funcionar no mobile e em temas que queira usar assim, como é o caso do Tainá). Modais ficam “por cima” das coisas, mesmo que a largura deles seja menor na estrutura em que cabem. Isso nos obriga a usar “overflow: hidden” nela, para evitar seja criado scroll interno (tanto vertical, quanto horizontal), se preciso.

A consequência disso é que os elementos dentro do painel de filtros ficam limitados à largura dele. Então se componentes como o Dropdown tivessem largura maior, eles iriam ficar escondidos por um segundo scroll:
image

Honestamente não sei bem como contornar isso. Há caminhos que envolvem colocar a “caixa” do dropdown totalmente fora da estrutura onde está o painel e posicioná-la fixamente, mas tenho receios de que qualquer mudança nessa hierarquia possa afetar estilizações que já tenhamos feito em temas e instalações por aí que mudaram cores, tamanhos ou bordas deste componente.

1 curtida

@suelanesilva, fiz um experimento aqui:

Ao passar o mouse em cima da opção, o efeito de ellipse será removido e o texto inteiro será exibido. É o caminho que eu consigo ver no momento para ao menos conseguirmos ler opções longas.

Hey Mateus!
Ficou simplesmente lindo, não sai da “caixa”, mas ganhamos um potencializador de visualizador, ficaram menores os caracteres, os 3 pontinhos, o numeral e os parênteses somem ao passar o mouse acima, sinto que resolve legal

Comportamento do filtro antes:
filtro0.0

Comportamento do filtro depois :3
filtro1.0

Ele pode vir junto no próximo pacote do Tainacan? :face_holding_back_tears:

Uai pera que isso não resolveu ainda não… era pra gerar quebra de linha :stuck_out_tongue:

@suelanesilva, pode tentar de novo?

@mateus.m.luna

Testei aqui na nossa RC, e ele segue com o mesmo comportamento anterior :confused:
Itens-da-Coleção-Opera-2023-04-11-17-06-19

Seguimos sem quebra de linha :((

Testa agora lá @suelanesilva… fiz uma outra tentativa.

1 curtida

Com esse mesmo zip acima correto?

Não, lá na Testes RC

Uau Mateus…
Ficou sublime, sério, uma solução chiquérrima pro nosso Tainacan!
Resolve completamente a problemática e ainda fica mega bem apresentado

Olha só que perfeição :point_down:t2:
Itens-da-Coleção-Opera-2023-04-12-08-52-06

Valeu de mais pela solução

2 curtidas

Ótimo!

Vamos lançar essa com a próxima versão :wink:

1 curtida