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] After choosing option from selections cannot write in textfield on Mozilla Firefox #612

Open
Delpieron opened this issue Dec 12, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@Delpieron
Copy link

Steps to reproduce

  1. Click on the text field from the TypeAheadField
  2. The options to select appear
  3. Choose an option
  4. Start typing text from your keyboard
  5. No input is displayed

Expected results

Taken the code input example, you choose the option "Apple" and then write eg."aaa" the value of TextField should be "Appleaaa"

Actual results

value of TextField is "Apple"

Package Version

5.2.0

Platform

Web

Code sample

Code sample
import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  final TextEditingController contrl = TextEditingController();
  final GlobalKey key = GlobalKey();
  final GlobalKey key2 = GlobalKey();
  final FocusNode focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text('title'),
        ),
        body: Center(
          child: TypeAheadField(
            focusNode: focusNode,
            controller: contrl,
            key: key,
            builder: (context, controller, focusNode) => TextFormField(
              decoration: const InputDecoration(labelText: 'Search'),
              focusNode: focusNode,
              key: key2,
              controller: controller,
            ),
            suggestionsCallback: (pattern) async {
              return ['Apple', 'Banana', 'Cherry'];
            },
            itemBuilder: (context, suggestion) {
              return ColoredBox(
                color: Colors.red,
                child: ListTile(
                  title: Text(suggestion),
                ),
              );
            },
            onSelected: (suggestion) {
              contrl.text = suggestion;
            },
          ),
        ),
      ),
    );
  }
}

Logs

Logs
[Paste your logs here]

Screenshots or Video

Screenshots / Video demonstration [Upload media here]
@Delpieron Delpieron added the bug Something isn't working label Dec 12, 2024
@Delpieron
Copy link
Author

Delpieron commented Dec 12, 2024

Additionally, on Mozilla Firefox, I cannot type anything using the keyboard. To work around this issue, I wrapped the TypeAheadField with a GestureDetector and requested a focus on tap:
onTap: () { FocusScope.of(context).requestFocus(focusNode); },

For the main bug, I also found a workaround in the onSelected function. I did the following:
focusNode.unfocus(); WidgetsBinding.instance.addPostFrameCallback((_) { focusNode.requestFocus(); Future.delayed(Duration.zero, () { contrl.selection = TextSelection.collapsed(offset: contrl.text.length); }); });

I think there might be a better way to solve these problems. I read something about focus behavior working differently in Mozilla Firefox, which might cause these issues, but that's just a guess.

@Sasha071201
Copy link

After investigating, it appears that the problem stems from the PointerInterceptor used within the package.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants