Skip to content

Fix TextInput erasing content after special characters#1058

Merged
jvictordev1 merged 2 commits intomainfrom
hotfix/text-input-special-characters-17951081976727250024
Feb 13, 2026
Merged

Fix TextInput erasing content after special characters#1058
jvictordev1 merged 2 commits intomainfrom
hotfix/text-input-special-characters-17951081976727250024

Conversation

@lucasn4s
Copy link
Collaborator

This PR fixes an issue where typing special characters (like accents or cedillas) in the TextInput component would cause all subsequent text to be erased when the field lost focus.

The root cause was the use of the .trim modifier on v-model within the foundational BaseInput.vue component. In Vue 3, .trim can conflict with IME (Input Method Editor) composition, especially in combination with masking directives. By removing .trim, we ensure that the internal state remains in sync with the browser's input buffer during complex character entry.

Additionally, this PR fixes several architectural bugs:

  1. In TextInput.vue, a template ref was being manually overwritten, which is both invalid in Vue 3.5+ (readonly refs) and caused the loss of exposed methods after any input.
  2. In both TextInput.vue and TextArea.vue, the defineExpose was passing non-reactive values (evaluated at setup). These have been converted to computed properties to ensure proper proxying of internal component state (like isFocused).

Version bumped to 3.154.7.

Fixes #916


PR created automatically by Jules for task 17951081976727250024 started by @lucasn4s

- Removed .trim modifier from v-model in BaseInput.vue to prevent interference with IME and special character composition.
- Fixed incorrect template ref assignment in TextInput.vue.
- Updated defineExpose in TextInput.vue and TextArea.vue to correctly proxy reactive properties using computed.
- Bumped version to 3.154.7.

Co-authored-by: lucasn4s <17988272+lucasn4s@users.noreply.github.com>
@google-labs-jules
Copy link
Contributor

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@github-actions github-actions bot added the 🐛 Bug Algo não está funcionando label Feb 12, 2026
@greptile-apps
Copy link

greptile-apps bot commented Feb 12, 2026

Greptile Overview

Greptile Summary

Esta PR corrige um bug crítico onde caracteres especiais (acentos, cedilha) faziam com que todo o texto subsequente fosse apagado ao desfocar o campo TextInput.

Principais alterações:

  • BaseInput.vue: Removido o modificador .trim do v-model que causava conflito com o IME (Input Method Editor) durante a composição de caracteres especiais, especialmente quando combinado com diretivas de máscara
  • TextInput.vue: Corrigida sobrescrita ilegal de template ref (readonly no Vue 3.5+) que causava perda de métodos expostos após qualquer entrada; convertidas exposições de valores não-reativos para propriedades computed para garantir proxying adequado do estado interno
  • TextArea.vue: Convertidas exposições para propriedades computed para manter consistência e reatividade adequada
  • Versão: Atualizada para 3.154.7

Confidence Score: 5/5

  • Esta PR é segura para merge, corrigindo bugs críticos sem introduzir novos riscos
  • As mudanças são bem fundamentadas e resolvem problemas arquiteturais identificados. A remoção do .trim corrige o conflito com IME, e a conversão para computed nas exposições garante reatividade adequada conforme as melhores práticas do Vue 3. Todas as alterações são compatíveis com versões anteriores e melhoram a robustez do código.
  • Nenhum arquivo requer atenção especial

Important Files Changed

Filename Overview
src/components/BaseInput.vue Removido modificador .trim do v-model para corrigir problemas com IME e caracteres especiais
src/components/TextInput.vue Corrigida sobrescrita de ref de template e convertidas exposições para propriedades computadas reativas
src/components/TextArea.vue Convertidas exposições para propriedades computadas para garantir reatividade adequada

Sequence Diagram

sequenceDiagram
    participant User
    participant TextInput
    participant BaseInput
    participant vModel
    participant IME as IME/Browser

    User->>TextInput: Digite caractere especial (ã, ç)
    TextInput->>BaseInput: Propaga entrada via v-model
    BaseInput->>IME: Composição de caractere com IME
    IME->>BaseInput: Atualiza internalValue (sem .trim)
    BaseInput->>vModel: Sincroniza estado
    
    User->>BaseInput: Desfoca campo (blur)
    BaseInput->>TextInput: Emite evento blur
    BaseInput->>vModel: Atualiza model.value com internalValue completo
    
    Note over TextInput,BaseInput: Refs expostas via computed() mantêm reatividade
    
    User->>TextInput: Chama método exposto (focus, blur, etc)
    TextInput->>BaseInput: Delega via baseInputRef.value
    BaseInput->>IME: Executa ação nativa
Loading

@lucasn4s
Copy link
Collaborator Author

O problema ainda está acontecendo.

Gravacao.de.tela.de.2026-02-12.16-46-46.webm

@google-labs-jules
Copy link
Contributor

O problema ainda está acontecendo.

Gravacao.de.tela.de.2026-02-12.16-46-46.webm

Identifiquei que a remoção do .trim era necessária mas insuficiente. O problema ocorria porque o handleBlur no BaseInput estava sobrescrevendo o valor do DOM com o estado reativo interno, que podia estar atrasado durante a composição de caracteres especiais ou devido ao processamento da máscara. Atualizei o BaseInput e o BaseMobileInput para sincronizar o valor do DOM antes de atualizar o modelo no evento de blur. Isso garante que o texto digitado seja preservado corretamente.

- Removed .trim modifier from v-model in BaseInput.vue and BaseMobileInput.vue to prevent interference with IME composition.
- Added manual synchronization of internalValue with native DOM value on blur in BaseInput and BaseMobileInput to ensure final characters are captured correctly.
- Fixed reactivity in TextInput and TextArea by using computed properties for exposed refs and fixing incorrect template ref assignments.
- Bumped version to 3.154.7.

Co-authored-by: lucasn4s <17988272+lucasn4s@users.noreply.github.com>
@jvictordev1 jvictordev1 merged commit 5fd54d8 into main Feb 13, 2026
8 checks passed
@jvictordev1 jvictordev1 deleted the hotfix/text-input-special-characters-17951081976727250024 branch February 13, 2026 17:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐛 Bug Algo não está funcionando

Projects

None yet

Development

Successfully merging this pull request may close these issues.

TextInput ignorando conteúdo

2 participants