Até que ponto é bom personalizar os select's?

[kvnol]

Depois de comentar no tópico #1709 fiquei meio pensativo sobre até que ponto é bom personalizar a tag select - seja em jQuery com select2 ou em Vue com o Multiselect ou em outros milhares de frameworks - para nos adaptarmos ao layout mandado pelo designer ou para melhor a usabilidade do projeto.

A partir de que ponto vocês começam a personalizar este componente com alguma lib? Quando precisam de uma busca no campo, apenas para mudar a cor das options ou vocês já começam com alguma lib e descartam totalmente o funcionamento do select no dispositivos móveis iOS/Android que já tem uma boa usabilidade apenas por usar a tag.

[felquis]

A customização não tem limites na cabeça de alguém com inspiração.

Mas o HTML em si tem um limite do que vc pode alterar do estilo.

O limite, ou melhor. Passar do limite, é quando vc já nem usa mais o select em si, que ai é uma grande responsabilidade de garantir que tudo funcionar de acordo em multiplas plataformas.

"Não há ponto que é bom" do estilo custom. O bom, é aquele que atende bem a necessidade do projeto e bola pra frente.

Dependendo do time e empresa que vc está, passar "muito tempo" em um select pode gerar um problema interno no time (ouvi histórias de pessoas focando muito em componentes específicos, enquanto a priorização da empresa era outra coisa), ai é melhor usar algum plugin que já seja bem testado, tenha o que precisa, seguir minimamente uma boa prática para ser meio simples de mudar no futuro se precisar.

Por causa de frameworks de interfaces React, Vue, etc, acabei adotando um "padrão" de "fachada", geralmente tenho um componente Select meu mesmo, com propriedades que são "universais" dentro do meu projeto. Porém, na implementação do componente acabo usando algumas abordagens no decorrer da vida do projeto, dependendo da necessidade que o time vê que precisamos.

Atualmente uso este plugin para React https://www.npmjs.com/package/react-select

Não tem limite para o custom.

[willycamargo]

Acho que não existe limites para a personalização quando pensamos que podemos construir nossos próprios componentes a partir de elementos genéricos.

Com react, tenho costume de usar o mesmo react-select que o @felquis citou.

Porém, quando for tomar a decisão de utilizar um select personalizado ao invés do nativo eu acho importante ter a certeza de precisar dessa personalização, pois existem N situações onde deve tratar o comportamento do componente e que o <select> nativo normalmente já resolve. Segue abaixo um exemplo de um select modificado dentro de um modal vs select nativo dentro da mesma modal.

Select personalizado (react-select)

Select nativo (<select> e <option>)

Esse é um problema que até mesmo os mais avançados selects personalizados acabam tendo, dentro de um wrapper de tamanho pré-definido ao dar overflow podem acontecer duas coisas:

1. Se o wrapper possuir overflow-y: hidden;, o conteúdo do dropdown será cortado
2. Se o wrapper possuir overflow-y: auto ou overflow-y: scroll;, o wrapper ira aumentar a área de scroll vertical

ps: sei que existem algumas formas de resolver esse problema, mas normalmente envolvem uma solução tão complexa que nenhum plugin/componente de select trabalha pra solucionar isso.

[rjcjunior]

Esteticamente, o select não é bem apresentável em alguns pontos como a estilização dos options e tal. Então, entendo que acaba sendo meio que de praxe a sua personalização nos projetos.

Eu concordo com o @felquis e o @willycamargo, não existe limites mas devemos ter a ponderação até que ponto vamos gastar tempo com ele.

Eu, particularmente, sigo a ideia do @felquis de ter um componente próprio para o select com propriedades universais.

Um ponto que acho interessante é quanto a sua personalização para dispositivos mobiles, não acho que seja muito legal aplicar um select customizado para o mobile, acho que para o usuário o funcionamento de um select hoje para esses dispositivos é a melhor escolha de interação e tal.