[syncfusion_flutter_pdfviewer][web] AutofillGroup Widget Causes Error After Using SfPdfViewer in Flutter Web

[naki35]

Bug description

Hello Syncfusion Team,

I am encountering an issue in Flutter Web when using the SfPdfViewer widget and then trying to use an AutofillGroup widget. After loading and interacting with the PDF using SfPdfViewer, when I try to focus on a TextField inside an AutofillGroup, I receive the following error in the console:

DartError: TypeError: Instance of 'Event': type 'Event' is not a subtype of type 'KeyboardEvent' dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3 throw dart-sdk/lib/_internal/js_shared/lib/rti.dart 1405:3 _failedAsCheck rti.dart:1405 dart-sdk/lib/_internal/js_shared/lib/rti.dart 1383:3 _generalAsCheckImplementation rti.dart:1383 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 243:33 _argumentErrors operations.dart:243 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 422:22 _checkAndCall operations.dart:422 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 451:39 dcall operations.dart:451 dart-sdk/lib/html/dart2js/html_dart2js.dart 37257:58 <fn> html_dart2js.dart:37257

Steps to reproduce

Steps to Reproduce:

1. Use the SfPdfViewer widget to display a PDF in Flutter Web.
2. After interacting with the PDF, focus on a TextField inside an AutofillGroup.
3. The error mentioned above will appear in the console.

Expected Behavior:
No error should occur when focusing on a TextField inside the AutofillGroup after using SfPdfViewer.

Flutter Version:

• Flutter version 3.24.4
• Web

Syncfusion Flutter PDF Viewer Version:

• 27.1.58

Looking forward to your help in resolving this issue.

Code sample

Code sample

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

void main() {
  runApp(const MaterialApp(home: MyHomePage()));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
              child: SfPdfViewer.network(
                  "https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf")),
          AutofillGroup(
              child: Column(children: [
            TextFormField(
                autofillHints: const [AutofillHints.username],
                decoration: const InputDecoration(hintText: 'username')),
            TextFormField(
                autofillHints: const [AutofillHints.password],
                decoration: const InputDecoration(hintText: 'password')),
          ])),
        ],
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

2024-11-13.11-08-16.mp4

Stack Traces

Stack Traces

DartError: TypeError: Instance of 'Event': type 'Event' is not a subtype of type 'KeyboardEvent'
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3       throw_
errors.dart:296
dart-sdk/lib/_internal/js_shared/lib/rti.dart 1405:3                              _failedAsCheck
rti.dart:1405
dart-sdk/lib/_internal/js_shared/lib/rti.dart 1383:3                              _generalAsCheckImplementation
rti.dart:1383
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 243:33  _argumentErrors
operations.dart:243
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 422:22  _checkAndCall
operations.dart:422
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 451:39  dcall
operations.dart:451
dart-sdk/lib/html/dart2js/html_dart2js.dart 37257:58                              <fn>
html_dart2js.dart:37257

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

[√] Flutter (Channel stable, 3.24.4, on Microsoft Windows [Version 10.0.19045.5011], locale tr-TR)
    • Flutter version 3.24.4 on channel stable at C:\Users\Lenovo\Documents\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 603104015d (3 weeks ago), 2024-10-24 08:01:25 -0700
    • Engine revision db49896cf2
    • Dart version 3.5.4
    • DevTools version 2.37.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\Lenovo\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2019 16.11.18)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.11.32802.440
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2023.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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.9+0--11185874)

[√] VS Code (version 1.95.2)
    • VS Code at C:\Users\Lenovo\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.100.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.5011]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 130.0.6723.117
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 129.0.2792.79

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

• No issues found!

[KrithigaPerumal]

Hi @naki35,

We are able to replicate the issue, with the reported errors occurring while auto filling the text fields after interacting with the PDF in the Flutter PDF Viewer. We are currently validating this issue, and we will provide further details once we find the root cause of the issue.

Regards,
Krithiga Perumal.