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

[General]: Field not getting unfocused for modalBottomSheets or AlertDialogs if was in focused already #1441

Open
3 of 7 tasks
mhmzdev opened this issue Dec 2, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@mhmzdev
Copy link

mhmzdev commented Dec 2, 2024

Is there an existing issue for this?

  • I have searched the existing issues

Package/Plugin version

9.5.0

Platforms

  • Android
  • iOS
  • Linux
  • MacOS
  • Web
  • Windows

Flutter doctor

Flutter doctor
[✓] Flutter (Channel stable, 3.24.0, on macOS 15.1.1 24B91 darwin-arm64, locale en-PK)
    • Flutter version 3.24.0 on channel stable at /Users/hamza/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 80c2e84975 (4 months ago), 2024-07-30 23:06:49 +0700
    • Engine revision b8800d88be
    • Dart version 3.5.0
    • DevTools version 2.37.2

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/hamza/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/hamza/Library/Android/sdk
    • ANDROID_SDK_ROOT = /Users/hamza/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11609105)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16B40
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11609105)

[✓] VS Code (version 1.95.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.100.0

[✓] Connected device (4 available)
    • iPhone 16 Pro (mobile)          • 73AC4DBE-6D02-474D-ADB8-DCF39EA31BE1 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-18-1 (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 15.1.1 24B91 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS 15.1.1 24B91 darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google Chrome 131.0.6778.86

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Minimal code example

Code sample
Align(
  alignment: Alignment.centerRight,
  child: TouchableOpacity(
    onTap: () {
      FocusScope.of(context).unfocus();
      showModalBottomSheet(
        context: context,
        backgroundColor: Colors.transparent,
        isScrollControlled: true,
        enableDrag: false,
        builder: (_) {
          return Padding(
            padding: context.modalBottomKeyboard,
            child: const _ResetPasswordModal(),
          );
        },
      );
    },
    child: Text(
      'Forgot password?',
      style: AppText.b2 + FontWeight.bold + AppTheme.c.secondary,
    ),
  ),
),

Current Behavior

Focus on any text field, the keyboard shows up. Now open any modalBottomSheet or showDialog, once they are closed the field goes back in focus causing the keyboard to come back to focus.

Expected Behavior

The field should be unfocused if any other entity shows up on the screen and show remained unfocued afterwards

Steps To Reproduce

  1. Android or iOS
  2. Tap on any text field so that it becomes in focus i.e. keyboard shows up
  3. I've used forgot password button but you can use any onTap or onPressed and try to open a modal
  4. The modal opens, and the keyboard exists
  5. Now, exit the modal by any means
  6. The keyboard shows up again

Same happens with alert dialog box opened via showDialog method

Aditional information

Screen.Recording.2024-12-02.at.2.44.01.PM.mov
@mhmzdev mhmzdev added the bug Something isn't working label Dec 2, 2024
@deandreamatias
Copy link
Collaborator

Related with #1297

@deandreamatias
Copy link
Collaborator

Hi!
I need a minimal code example to can execute:

  • Without external packages and dependencies
  • Without refereces of imports
  • With only Flutter Material or Cupertino widgets and FormBuilder widgets
  • Starting from main Dart method

Example:

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:form_builder_validators/form_builder_validators.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter FormBuilder Example',
      debugShowCheckedModeBanner: false,
      localizationsDelegates: const [
        FormBuilderLocalizations.delegate,
        ...GlobalMaterialLocalizations.delegates,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: FormBuilderLocalizations.supportedLocales,
      home: const _ExamplePage(),
    );
  }
}

class _ExamplePage extends StatefulWidget {
  const _ExamplePage();

  @override
  State<_ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<_ExamplePage> {
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FormBuilder(
        key: _formKey,
        child: Column(
          children: [
            FormBuilderTextField(
              name: 'full_name',
              decoration: const InputDecoration(labelText: 'Full Name'),
              validator: FormBuilderValidators.compose([
                FormBuilderValidators.required(),
              ]),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                _formKey.currentState?.saveAndValidate();
                debugPrint(_formKey.currentState?.value.toString());
              },
              child: const Text('Print'),
            )
          ],
        ),
      ),
    );
  }
}

Thanks a lot

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