Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Input loses focus when typing in Cell component #89

Open
RobertPaulig opened this issue Dec 6, 2024 · 0 comments
Open

Bug: Input loses focus when typing in Cell component #89

RobertPaulig opened this issue Dec 6, 2024 · 0 comments

Comments

@RobertPaulig
Copy link

Bug: Input loses focus when typing in Cell component

Description

When using the Input component inside Cell, the input loses focus after each keystroke, making it impossible to type continuously. This issue significantly impacts form usability in Telegram Mini Apps.

Steps to Reproduce

  1. Create a basic form with Input component inside Cell
  2. Try to type text into the input
  3. Input loses focus after each keystroke

Minimal Reproduction

import React, { useState } from 'react';
import { AppRoot, List, Section, Cell, Input } from '@telegram-apps/telegram-ui';

export const TestInput: React.FC = () => {
  const [value, setValue] = useState('');
  
  return (
    <AppRoot>
      <List>
        <Section>
          <Cell>
            <Input
              header="Test input"
              placeholder="Enter text..."
              value={value}
              onChange={e => setValue(e.target.value)}
            />
          </Cell>
        </Section>
      </List>
    </AppRoot>
  );
};

Expected Behavior

Input should maintain focus while typing until blur event or clicking outside

Current Behavior

Input loses focus after each keystroke when wrapped in Cell component

Environment

  • @telegram-apps/telegram-ui version: 2.1.8
  • React version: 18.3.1
  • Next.js version: 13.5.6
  • Browser: Chrome

Workaround

Removing Cell wrapper fixes the issue:

<Section>
  <Input
    header="Test input"
    placeholder="Enter text..."
    value={value}
    onChange={e => setValue(e.target.value)}
  />
</Section>

Labels

  • bug
  • component: Input
  • priority: high
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant