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.

1 curtida

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:

1 curtida

@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

1 curtida

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