Como resolver problemas no campo de pesquisa em versões antigas do Android?

[lmdpires]

Boa tarde. Estou a ter problemas no campo do search no mobile com versões antigas de Android (versão 11 e 12 por ex) Para aparecer o campo do search tenho que clicar nos 3 traços no canto superior direito e está a aparecer, mas quando tento escrever algo dentro do search, o campo desaparece e não consigo pesquisar nada. Isto acontece apenas em versões antigas de android no chrome.

Existe alguma solução para este tipo de problema? Já estive a ler e falam muito do focus de javascript, mas alterando este, vai alterar também na versão para desktop, certo? E na verdade não percebo muito de javascript.

A solução se calhar passaria para que o campo do search estivesse sempre visível no mobile, mas também não estou a conseguir fazer isso.

O código que tenho no CSS é este:

@media screen and (max-width: 600px) {
  
  .search [type="search"] {
    
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin-top: 10px;
    padding: 4px;
    background-color: #FFF;
    
  }
  
  
  .search input[type="search"] {
  border: 1px solid #ddd;
  border-radius: 30px;
  box-sizing: border-box;
  color: #999;
  height: 40px;
  padding-left: 40px;
  padding-right: 20px;
  -webkit-appearance: none;
  width: 100%;
  margin-bottom: 15px;
    
}

Obrigado a todos.

[Jeremias Dev]

Parece que o comportamento que você descreveu pode estar relacionado com um problema de foco ou um conflito de eventos JavaScript que só se manifesta em versões mais antigas do Android. Uma solução possível seria simplificar o tratamento do campo de busca para garantir que ele permaneça visível e acessível.

Como você mencionou que não possui muita familiaridade com JavaScript e gostaria de manter o campo de busca sempre visível, podemos ajustar o CSS para tentar contornar o problema. Aqui está uma sugestão para modificar o seu CSS para garantir que o campo de busca esteja sempre visível:

css

@media screen and (max-width: 600px) {
    .search [type="search"], .search input[type="search"] {
        float: none;
        display: block; /* Garante que o input esteja sempre visível */
        text-align: left;
        width: 100%;
        margin-top: 10px;
        padding: 4px;
        background-color: #FFF;
        border: 1px solid #ddd;
        border-radius: 30px;
        box-sizing: border-box;
        color: #999;
        height: 40px;
        padding-left: 40px;
        padding-right: 20px;
        -webkit-appearance: none; /* Remove a aparência padrão nos browsers que usam WebKit */
        width: 100%;
        margin-bottom: 15px;
        position: fixed; /* Mantém o campo de busca fixo no topo da página */
        top: 0; /* Posiciona o campo de busca no topo da página */
        left: 0; /* Alinea o campo de busca à esquerda */
        z-index: 1000; /* Garante que o campo de busca fique acima dos outros elementos */
    }
}

 

Essas mudanças no CSS irão fazer com que o campo de busca permaneça sempre visível no topo da página em dispositivos com telas de até 600px de largura. A propriedade `position: fixed` é especialmente útil para garantir que o campo de busca não desapareça ou mude de posição inesperadamente ao receber foco.

Teste essas mudanças no seu ambiente de desenvolvimento e veja se o problema persiste nas versões antigas do Android. Se o problema continuar, pode ser necessário investigar mais a fundo os scripts JavaScript envolvidos ou considerar uma abordagem diferente para tratar o foco e os eventos de interação no campo de busca.

[lmdpires]

Olá, desde já muito obrigado pela resposta.

Já testei e não funcionou, além de não aparecer sempre visível, continuo a ter que clicar nos 3 traços para aparecer o campo de pesquisa e depois o comportamento é igual ao que está no vídeo que enviei, desaparece, não consigo escrever.

Em javascript só encontro este código referente ao search:

 // Add focus classname to search field
    each('.form-field [type="search"]', function(el) {
      el.addEventListener('focus', function() { this.parentNode.classList.add(Util.classNames.FOCUS); });
      el.addEventListener('focusout', function() { this.parentNode.classList.remove(Util.classNames.FOCUS); });
    });

Em Iphone com Chrome ou Safari funciona correctamente, android 13, android 14 também funciona bem, mas na versão 12 ou 11 por exemplo não funciona.

 

Obrigado desde já pela sua atenção.

[Jeremias Dev]

Entendo. Vamos tentar outra abordagem. Pelo que você descreveu, o problema parece estar relacionado com o tratamento de eventos de foco em versões mais antigas do Android. O fato de funcionar bem em dispositivos mais recentes e em iPhones indica que pode ser uma questão de compatibilidade com essas versões específicas do sistema.

Vamos tentar ajustar o JavaScript para ser mais robusto em relação a essas versões. Uma das coisas que podemos fazer é verificar se o evento de foco está de fato sendo aplicado corretamente, ou se há alguma interrupção ou comportamento anormal nesses dispositivos.

Solução Potencial em JavaScript

Uma das estratégias pode ser usar um pouco mais de controle sobre os eventos de foco e foco fora (focus e focusout), certificando-se de que eles estão realmente sendo aplicados. Podemos adicionar alguns logs de console para entender melhor o que está acontecendo quando você testa em dispositivos com Android 11 e 12:

 

each('.form-field [type="search"]', function(el) {
    el.addEventListener('focus', function() {
        console.log('Foco no elemento: ', this);
        this.parentNode.classList.add(Util.classNames.FOCUS);
    });
    el.addEventListener('focusout', function() {
        console.log('Foco fora do elemento: ', this);
        this.parentNode.classList.remove(Util.classNames.FOCUS);
    });
});

 

Adicionando esses logs, você pode abrir o console de desenvolvimento do navegador no seu dispositivo Android (ou em um emulador) e verificar o que está sendo registrado quando o campo de busca recebe e perde o foco. Isso pode dar uma pista se o evento está sendo disparado corretamente.

Solução Potencial em CSS

Além disso, para garantir que o campo de pesquisa esteja sempre visível e para tentar resolver o problema de desaparecer, você pode tentar ajustar o CSS para tornar o input de busca mais estável. Considerando que você mencionou que o campo só aparece após clicar nos três traços, isso sugere que talvez haja algum CSS que está controlando a visibilidade desse campo baseado em alguma classe que é toggled via JavaScript. Sem ver todo o código, é difícil ser específico, mas você pode tentar garantir que o campo não esteja sendo ocultado por algum outro CSS:

@media screen and (max-width: 600px) {
    .form-field [type="search"] {
        display: block !important; /* Usa !important para sobrescrever outras regras */
        opacity: 1 !important; /* Garante que o campo seja totalmente opaco e visível */
        visibility: visible !important; /* Assegura que o campo esteja visível */
    }
}

Teste essas alterações e veja se resolve o problema. Se mesmo assim não funcionar, pode ser útil revisar como os eventos estão sendo gerenciados ou procurar por alguma biblioteca ou framework que possa estar afetando o comportamento esperado.

Editado Maio 11 por Jeremias Dev

[lmdpires]

Muito obrigado, já testei e não houve qualquer alteração nos Androids com versões 11 e 12.

Em anexo coloco o código de css, javascript e html para poderes ver. Não estou a conseguir testar com o emulador, apesar de ter tentado a noite inteira.

Desde já, muito obrigado pela sua atenção, é que realmente está tudo a funcionar correctamente e só me falta esta parte do campo de pesquisa em androids, não sei mesmo o que será.

HTML.txt CSS code.txt Javascript.txt

[lmdpires]

O ficheiro de HTML é referente apenas a uma página, pois o HTML está dividido por páginas, homepage, página de secção, página de artigos. Cada um tem um HTML. Não sei se é possível testar dessa forma.

[Jeremias Dev]

Parece que a sua implementação HTML, CSS e JavaScript é bastante complexa e pode estar havendo conflitos ou problemas de compatibilidade em versões mais antigas do Android que não foram previstos. Aqui estão algumas sugestões mais específicas que podem ajudar a resolver ou diagnosticar o problema:

 JavaScript
No JavaScript, você está adicionando e removendo classes de foco com eventos de `focus` e `focusout`. Em algumas versões antigas de navegadores, pode haver problemas com esses eventos ou a maneira como eles são manipulados. Uma possível solução é tentar simplificar esse processo ou adicionar logs mais detalhados para entender o que exatamente está falhando:

each('.form-field [type="search"]', function(el) {
    el.addEventListener('focus', function() {
        console.log('Foco obtido no elemento: ', this);
        this.parentNode.classList.add(Util.classNames.FOCUS);
    });
    el.addEventListener('focusout', function() {
        console.log('Foco perdido do elemento: ', this);
        this.parentNode.classList.remove(Util.classNames.FOCUS);
    });
});

CSS
Verifique se não há outros estilos CSS que possam estar influenciando a visibilidade ou o comportamento do seu campo de pesquisa. Pode ser que o campo esteja sendo ocultado ou re-estilizado por regras CSS que não foram contempladas nos trechos que você compartilhou. Considere também a possibilidade de conflitos com pseudo-elementos ou pseudo-classes que não funcionam bem em versões mais antigas do Android.

Estrutura HTML
Certifique-se de que a estrutura HTML não está sendo alterada por JavaScript de maneira que afeta a visibilidade ou a acessibilidade do campo de pesquisa em certas condições ou resoluções de tela. Elementos que envolvem o campo de pesquisa podem estar recebendo estilos que impedem a interação correta.

Testes e Diagnóstico
Já que você mencionou dificuldades com o emulador, pode valer a pena tentar outros métodos de teste, como BrowserStack ou dispositivos físicos de testes para essas versões específicas do Android. Isso pode fornecer mais insights sobre o que está ocorrendo.

Polifills
Para garantir a compatibilidade, considere a implementação de polifills para funções JavaScript ou CSS que podem não ser suportadas em navegadores antigos. Isso pode incluir eventos de foco, manipulação de classes CSS, e mais.

Se depois de aplicar essas verificações o problema persistir, talvez seja necessário considerar a reestruturação da lógica de exibição e foco do campo de pesquisa ou até mesmo uma abordagem diferente para lidar com a compatibilidade entre navegadores.

Uma dica final: tente simplificar o problema isolando o campo de pesquisa em uma página de teste. Remova outros elementos e scripts que não são essenciais para o funcionamento do campo de pesquisa. Isso pode ajudar a identificar se o problema está sendo causado por interações com outros componentes.