feat: Allow character deletion and chip editing in BdsInputChips

[Copilot]

Problem

The BdsInputChips component was not allowing users to delete individual characters while typing a new chip. When pressing Backspace or Delete keys, the component would remove the entire last chip instead of allowing normal text editing within the input field.

This made it impossible to correct typos while typing - users had to delete the entire chip and retype from scratch. Additionally, there was no way to edit chips that had already been created.

Root Cause

The keyPressWrapper method was checking this.value (component state) to determine if the input was empty before removing chips. However, due to browser event timing:

1. keydown event fires first (where keyPressWrapper executes)
2. Browser's default behavior modifies the input value
3. input event fires, updating this.value

This meant this.value could be out of sync with the actual DOM input value when the keydown handler ran, leading to incorrect behavior.

Solution

Changed the condition to check nativeInput.value (the actual DOM input element's value) instead of this.value, and implemented chip editing functionality:

// Before
if ((this.value === null || this.value.length <= 0) && this.internalChips.length) {
  this.removeLastChip();
}

// After - Backspace
const currentValue = this.nativeInput?.value || '';
if (currentValue.length === 0 && this.internalChips.length) {
  // Move the last chip content to the input for editing
  const lastChip = this.getLastChip();
  this.removeLastChip();
  this.value = lastChip;
  if (this.nativeInput) {
    this.nativeInput.value = lastChip;
    setTimeout(() => {
      this.nativeInput.setSelectionRange(lastChip.length, lastChip.length);
    }, 0);
  }
  event.preventDefault();
}

This ensures we check the actual current state of the input field at the time of the keydown event, not the potentially stale component state.

Changes

• Modified keyPressWrapper in input-chips.tsx to use nativeInput.value for accurate input state checking
• Enhanced Backspace behavior: When pressed on empty input, moves last chip content to input field for editing with cursor positioned at the end
• Delete key behavior: Removes chip completely without editing (different from Backspace)
• Added comprehensive unit tests to verify character deletion and chip editing behavior
• Added e2e tests to validate the complete user interaction flow

Testing

All 61 tests pass (45 unit + 16 e2e):

• ✅ Users can now type and delete characters normally with Backspace/Delete
• ✅ NEW: Backspace on empty input moves chip content to input for editing
• ✅ Delete key removes chips without editing
• ✅ No regressions in existing functionality
• ✅ Build succeeds

Behavior

Character deletion while typing:

• Typing "test123" and pressing Backspace correctly changes text to "test12"

Chip editing (NEW):

• With chips ["email1", "email2"] and empty input, pressing Backspace removes "email2" and moves its content to the input field for editing
• User can correct typos and press Enter to recreate the chip
• Delete key still removes chips completely without editing

Fixes #1099

Original prompt

---

This section details on the original issue you should resolve

<issue_title>feat: permitir a exclusão de caracteres ao escrever um novo chip</issue_title>
<issue_description>Essa funcionalidade está relacionada a algum problema? Descreva.

O Componente do BdsInputChips não apaga o character após adição de um chip.
Ao acionar backspace ou DEL o componente apaga todo o chip ao invês de apagar apenas o texto e permitir edição novamente.

---

Descreva a solução que você gostaria

Gostaria que enquanto eu estiver escrevendo o chip novo e precisar apagar algum caracter, seja possível fazer isso sem ter que apagar completamente todo o chip para reescrever

---

Componente do Design System

• BdsInputChips

Isso é uma alteração em um componente existente ou criação de um novo?

• Atualização de componente existente
• Criação de novo componente

---

🛠️ Notas de implementação (para desenvolvedores e agentes de IA) - NÃO REMOVER

• Utilize os links do Figma com as ferramentas Figma MCP para inspecionar e extrair os detalhes do componente antes de iniciar o desenvolvimento.
• Todo componente implementado ou atualizado deve conter histórias no Storybook demonstrando todos os estados possíveis do componente.
• Sempre que possível, consolide as variações em uma única página de story, utilizando controles ou variantes para representar diferentes estados.
  </issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #1099

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[github-actions]

PR Preview Action v1.6.2
🚀 View preview at https://takenet.github.io/blip-ds/pr-preview/pr-1100/
Built to branch gh-pages at 2025-10-20 16:07 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[lucasmiqueias]

@copilot Preciso que ao usar backspace ou del quando um chip for adicionado, seja removido o chip mais o valor persista apagando apenas um texto, veja um exemplo de como pode ser feito:

case 'Backspace':
        if ((this.value === null || this.value.length <= 0) && this.internalChips.length) {
          // Move the last chip content to the input for editing
          const lastChip = this.getLastChip();
          this.removeLastChip();
          this.value = lastChip;
          // Update the native input value to reflect the change
          if (this.nativeInput) {
            this.nativeInput.value = lastChip;
            // Set cursor to the end of the input
            setTimeout(() => {
              this.nativeInput.setSelectionRange(lastChip.length, lastChip.length);
            }, 0);
          }
          this.bdsChange.emit({ data: this.internalChips, value: this.getLastChip() });
          this.bdsChangeChips.emit({ data: this.internalChips, value: this.getLastChip() });
          // Prevent default backspace behavior since we handled it
          event.preventDefault();
        }
        break;

[Copilot]

@copilot Preciso que ao usar backspace ou del quando um chip for adicionado, seja removido o chip mais o valor persista apagando apenas um texto, veja um exemplo de como pode ser feito:

...

Implemented as requested. When Backspace is pressed on an empty input, the last chip is now removed and its content is moved to the input field for editing, with the cursor positioned at the end.

Behavior:

• Backspace on empty input → removes chip and moves content to input for editing
• Delete on empty input → removes chip completely (no editing)
• Both keys allow normal character deletion when typing

Commit: b4e0c43

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• android.clients.google.com
  • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --mute-audio --crashpad-handler-pid=3857 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/puppeteer_dev_chrome_profile-rar3ve --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,304992413622941388,16572965988594866476,262144 --enable-features=PdfOopif --disable-features=AcceptCHFrame,IsolateSandboxedIframes,MediaRouter,OptimizationHints,PaintHolding,ProcessPerSiteUpToMainFrameThreshold,Translate,VizDisplayCompositor --variations-seed-version (dns block)
  • Triggering command: /opt/google/chrome/chrome --allow-pre-commit-input --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-crash-reporter --disable-default-apps --disable-dev-shm-usage --disable-hang-monitor --disable-infobars --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --disable-search-engine-choice-screen --disable-sync --enable-automation --export-tagged-pdf --force-color-profile=srgb --generate-pdf-document-outline --metrics-recording-only --no-first-run --password-store=basic --use-mock-keychain --disable-features=Translate,AcceptCHFrame,MediaRouter,OptimizationHints,ProcessPerSiteUpToMainFrameThreshold,IsolateSandboxedIframes,VizDisplayCompositor --enable-features=PdfOopif --headless --hide-scrollbars --mute-audio --disable-extensions about:blank --no-sandbox --disable-setuid-sandbox --disable-web-security --font-render-hinting=medium --incognito --remote-debugging-port=0 --user-data-dir=/tmp/puppeteer_dev_chrome_profile-rar3ve (dns block)
  • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --mute-audio --crashpad-handler-pid=5419 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/puppeteer_dev_chrome_profile-lmKq7U --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,16095214285987144463,12720591281010720637,262144 --enable-features=PdfOopif --disable-features=AcceptCHFrame,IsolateSandboxedIframes,MediaRouter,OptimizationHints,PaintHolding,ProcessPerSiteUpToMainFrameThreshold,Translate,VizDisplayCompositor --variations-seed-version (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)