Skip to content

[pointer_interceptor][web] PointerInterceptor is not working with Autocomplete optionsViewBuilder #167593

New issue
New issue
Open
Open
[pointer_interceptor][web] PointerInterceptor is not working with Autocomplete optionsViewBuilder#167593
Labels
P2Important issues not at the top of the work listfound in release: 3.29Found to occur in 3.29found in release: 3.32Found to occur in 3.32has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: pointer_interceptorA widget to prevent clicks from being swallowed by underlying HtmlElementViews on the webpackageflutter/packages repository. See also p: labels.team-webOwned by Web platform teamtriaged-webTriaged by Web platform team

Description

@4rthurmonteiro
4rthurmonteiro
opened on Apr 22, 2025

Steps to reproduce

On Flutter web, add on a stack a native widget and the Autocomplete widget, like this:

Stack(
  children: <Widget>[
  NativeWidget(),
  PointerInterceptor(
   child: AutocompleteWidget(),
  )
 ]
)

Expected results

Don't tap in the native widget.

Actual results

When some option is tapped in autocomplete, the PointerInterceptor did not work.

I tried to add PointerInterceptor in each element from optionsViewBuilder but the problem still persist.

Code sample

Code sample 
import 'package:flutter/material.dart';
import 'dart:html' as html;
import 'dart:ui_web' as ui_web;
import 'package:pointer_interceptor/pointer_interceptor.dart';

const double _videoWidth = 640;
const double _videoHeight = 480;

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

/// Main app
class MyApp extends StatelessWidget {
  /// Creates main app.
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Stopping Clicks with some DOM',
      home: MyHomePage(),
    );
  }
}

/// First page
class MyHomePage extends StatefulWidget {
  /// Creates first page.
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> clicks = <String>[];

  @override
  void initState() {
    super.initState();
    clicks.add('none');
  }

  void _clickedOn(String key) {
    setState(() {
      clicks.add(key);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PointerInterceptor demo with Autocomplete'),
        actions: <Widget>[
          PointerInterceptor(
            // debug: true,
            child: IconButton(
              icon: const Icon(Icons.add_alert),
              tooltip: 'AppBar Icon',
              onPressed: () {
                _clickedOn('appbar-icon');
              },
            ),
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Lasts click on: ${clicks..join(',')}',
              key: const Key('last-clicked'),
            ),

            Container(
              color: Colors.black,
              width: _videoWidth,
              height: _videoHeight,
              child: Stack(
                alignment: Alignment.center,
                children: <Widget>[
                  NativeWidget(
                    key: const ValueKey<String>('background-widget'),
                    onClick: () {
                      _clickedOn('native-element');
                    },
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      ElevatedButton(
                        key: const Key('transparent-button'),
                        child: const Text('Never calls onPressed'),
                        onPressed: () {
                          _clickedOn('transparent-button');
                        },
                      ),

                      PointerInterceptor(
                        child: ElevatedButton(
                          key: const Key('clickable-button'),
                          child: const Text('Works As Expected'),
                          onPressed: () {
                            _clickedOn('clickable-button');
                          },
                        ),
                      ),
                      ExampleAutocomplete(
                        key: const Key('autocomplete'),
                        onSelect: () {
                          _clickedOn('autocomplete');
                        },
                      ),

                      PointerInterceptor(
                        child: ExampleAutocomplete(
                          hint: 'Autocomplete with PointerInterceptor',
                          key: const Key(
                            'autocomplete-with-pointer-interceptor',
                          ),
                          onSelect: () {
                            _clickedOn('autocomplete-with-pointer-interceptor');
                          },
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            clicks.clear();
            clicks.add('none');
          });
        },
        tooltip: 'Clear clicks',
        child: const Icon(Icons.delete),
      ),
    );
  }
}

html.Element htmlElement =
    html.DivElement()
      ..style.width = '100%'
      ..style.height = '100%'
      ..style.backgroundColor = '#fabada'
      ..style.cursor = 'auto'
      ..id = 'background-html-view';

const String _htmlElementViewType = '_htmlElementViewType';

/// A widget representing an underlying html view
class NativeWidget extends StatelessWidget {
  /// Constructor
  const NativeWidget({super.key, required this.onClick});

  /// A function to run when the element is clicked
  final VoidCallback onClick;

  @override
  Widget build(BuildContext context) {
    htmlElement.onClick.listen((_) {
      onClick();
    });

    ui_web.platformViewRegistry.registerViewFactory(
      _htmlElementViewType,
      (int viewId) => htmlElement,
    );

    return const HtmlElementView(viewType: _htmlElementViewType);
  }
}

class ExampleAutocomplete extends StatelessWidget {
  ExampleAutocomplete({super.key, required this.onSelect, this.hint});

  final VoidCallback onSelect;
  final String? hint;

  final fruits = <String>['apple', 'banana'];

  @override
  Widget build(BuildContext context) {
    return Autocomplete<String>(
      onSelected: (_) {
        onSelect();
      },
      optionsBuilder: (value) => fruits,
      fieldViewBuilder:
          (context, textEditingController, focusNode, onFieldSubmitted) =>
              TextField(
                onTap: () => onSelect(),
                controller: textEditingController,
                focusNode: focusNode,
                onSubmitted: (value) {
                  onFieldSubmitted();
                },
                decoration: InputDecoration(
                  hintText: hint ?? 'Autocomplete',
                  border: OutlineInputBorder(),
                ),
              ),
    );
  }
}

Screenshots or Video

Logs

No response

Flutter Doctor output

Doctor output 
[✓] Flutter (Channel stable, 3.29.2, on macOS 15.1.1 24B91 darwin-arm64, locale pt-BR) [520ms]
    • Flutter version 3.29.2 on channel stable at /Users/consultorweb.arthur/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c236373904 (6 weeks ago), 2025-03-13 16:17:06 -0400
    • Engine revision 18b71d647a
    • Dart version 3.7.2
    • DevTools version 2.42.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [1.370ms]
    • Android SDK at /Users/consultorweb.arthur/Library/Android/sdk
    • Platform android-35, build-tools 34.0.0
    • ANDROID_SDK_ROOT = /Users/consultorweb.arthur/Library/Android/sdk
    • Java binary at: /Users/consultorweb.arthur/Library/Java/JavaVirtualMachines/azul-17.0.8/Contents/Home/bin/java
      This JDK is specified in your Flutter configuration.
      To change the current JDK, run: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment Zulu17.44+15-CA (build 17.0.8+7-LTS)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2024.2) [11ms]
    • 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 21.0.3+-79915917-b509.11)

[✓] VS Code (version 1.99.3) [10ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.108.0

[✓] Connected device (3 available) [6,0s]
    • 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 135.0.7049.97

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

• No issues found!

Activity

  1. maheshj01
    added
    in triagePresently being triaged by the triage team
    on Apr 24, 2025

  2. maheshj01 commented on Apr 24, 2025

    @maheshj01
    maheshj01
    on Apr 24, 2025
    Member

    Hey @4rthurmonteiro, Thanks for filing the issue. I am able to reproduce the issue on stable and the master channel. It looks like Pointer interceptor is not taking overlays into account. Clicking on the options is passing the tap to native widgets

    Screen.Recording.2025-04-23.at.21.38.04.mov
    code sample 
    import 'package:flutter/material.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart';
import 'package:web/web.dart' as web;

const double _videoWidth = 640;
const double _videoHeight = 480;

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

/// Main app
class MyApp extends StatelessWidget {
  /// Creates main app.
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Stopping Clicks with some DOM',
      home: MyHomePage(),
    );
  }
}

/// First page
class MyHomePage extends StatefulWidget {
  /// Creates first page.
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> clicks = <String>[];
  int tapCounter = 0;
  @override
  void initState() {
    super.initState();
    clicks.add('none');
  }

  var prevCounter = 0;
  void _clickedOn(String key) {
    // calculate increment of tapCounter
    setState(() {
      clicks.add(key);
      tapCounter++;
    });
    print('Clicked on: $key ($tapCounter)');
  }

  @override
  Widget build(BuildContext context) {
    final n = clicks.length;
    return Scaffold(
      appBar: AppBar(
        title: const Text('PointerInterceptor demo with Autocomplete'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Clicks counter: $tapCounter'),
            Text('last two clicks:'),
            Text(
              '\n ${clicks[n - 1]} \n ${n > 1 ? clicks[n - 2] : ''} \n',
              key: const Key('last-clicked'),
            ),

            Container(
              color: Colors.black,
              width: _videoWidth,
              height: _videoHeight,
              child: Stack(
                alignment: Alignment.center,
                children: <Widget>[
                  NativeWidget(
                    key: const ValueKey<String>('background-widget'),
                    onClick: () {
                      _clickedOn('native-element');
                    },
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      ExampleAutocomplete(
                        key: const Key('autocomplete'),
                        onSelect: () {
                          _clickedOn('autocomplete');
                        },
                      ),
                      PointerInterceptor(
                        child: ExampleAutocomplete(
                          hint: 'Autocomplete with PointerInterceptor',
                          key: const Key(
                            'autocomplete-with-pointer-interceptor',
                          ),
                          onSelect: () {
                            _clickedOn('autocomplete-with-pointer-interceptor');
                          },
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            clicks.clear();
            clicks.add('none');
          });
        },
        tooltip: 'Clear clicks',
        child: const Icon(Icons.delete),
      ),
    );
  }
}

/// A widget representing an underlying html view
class NativeWidget extends StatelessWidget {
  /// Constructor
  const NativeWidget({super.key, required this.onClick});

  /// A function to run when the element is clicked
  final VoidCallback onClick;

  @override
  Widget build(BuildContext context) {
    return HtmlElementView.fromTagName(
      tagName: 'div',
      onElementCreated: (el) {
        el as web.HTMLDivElement;
        el.style.width = '100%';
        el.style.height = '100%';
        el.style.backgroundColor = '#fabada';
        el.style.cursor = 'auto';
        el.id = 'background-html-view';
        el.onClick.listen((_) {
          onClick();
        });
      },
    );
  }
}

class ExampleAutocomplete extends StatelessWidget {
  ExampleAutocomplete({super.key, required this.onSelect, this.hint});

  final VoidCallback onSelect;
  final String? hint;

  final fruits = <String>['apple', 'banana'];

  @override
  Widget build(BuildContext context) {
    return Autocomplete<String>(
      onSelected: (_) {
        onSelect();
      },
      optionsBuilder: (value) => fruits,
      fieldViewBuilder:
          (context, textEditingController, focusNode, onFieldSubmitted) =>
              TextField(
                onTap: () => onSelect(),
                controller: textEditingController,
                focusNode: focusNode,
                onSubmitted: (value) {
                  onFieldSubmitted();
                },
                decoration: InputDecoration(
                  hintText: hint ?? 'Autocomplete',
                  border: OutlineInputBorder(),
                ),
              ),
    );
  }
}
    flutter doctor -v

    master

    [✓] Flutter (Channel master, 3.32.0-1.0.pre.90, on macOS 15.4 24E248 darwin-arm64, locale en-US) [9.7s]
    • Flutter version 3.32.0-1.0.pre.90 on channel master at /Users/mahesh/Development/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 29810cd6d1 (31 hours ago), 2025-04-16 00:07:50 +0530
    • Engine revision 29810cd6d1
    • Dart version 3.8.0 (build 3.8.0-265.0.dev)
    • DevTools version 2.45.0-dev.0

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [1,993ms]
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.5+-12932927-b750.29)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.3) [1,369ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16E140
    • CocoaPods version 1.16.2

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

[✓] Android Studio (version 2024.3) [130ms]
    • 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 21.0.5+-12932927-b750.29)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1) [128ms]
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.96.2) [18ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

[✓] Connected device (3 available) [6.3s]
    • iPhone 15 Pro (mobile) • 7BB5BB29-BA56-4EB1-B698-E6A1AAD138E4 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-18-0
      (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 15.4 24E248 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 131.0.6778.265

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

• No issues found!

    stable

    [!] Flutter (Channel stable, 3.29.3, on macOS 15.4 24E248 darwin-arm64, locale en-US) [591ms]
    • Flutter version 3.29.3 on channel stable at /Users/mahesh/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ea121f8859 (5 days ago), 2025-04-11 19:10:07 +0000
    • Engine revision cf56914b32
    • Dart version 3.7.2
    • DevTools version 2.42.3
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update
      checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [2.3s]
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.5+-12932927-b750.29)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.3) [1,559ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16E140
    • CocoaPods version 1.16.2

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

[✓] Android Studio (version 2024.3) [152ms]
    • 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 21.0.5+-12932927-b750.29)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1) [150ms]
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.96.2) [22ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

[✓] Connected device (4 available) [6.5s]
    • iPhone 15 Pro (mobile)          • 7BB5BB29-BA56-4EB1-B698-E6A1AAD138E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-18-0 (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 15.4 24E248 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS 15.4 24E248 darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google Chrome 131.0.6778.265

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

! Doctor found issues in 1 category.
  3. maheshj01
    added
    packageflutter/packages repository. See also p: labels.
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    p: pointer_interceptorA widget to prevent clicks from being swallowed by underlying HtmlElementViews on the web
    found in release: 3.29Found to occur in 3.29
    found in release: 3.32Found to occur in 3.32
    team-webOwned by Web platform team
    and removed
    in triagePresently being triaged by the triage team
    on Apr 24, 2025

  4. 4rthurmonteiro commented on Apr 24, 2025

    @4rthurmonteiro
    4rthurmonteiro
    on Apr 24, 2025
    ContributorAuthor

    Hey @4rthurmonteiro, Thanks for filing the issue. I am able to reproduce the issue on stable and the master channel. It looks like Pointer interceptor is not taking overlays into account. Clicking on the options is passing the tap to native widgets

    Screen.Recording.2025-04-23.at.21.38.04.mov
    code sample
    import 'package:flutter/material.dart';
    import 'package:pointer_interceptor/pointer_interceptor.dart';
    import 'package:web/web.dart' as web;

    const double _videoWidth = 640;
    const double _videoHeight = 480;

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

    /// Main app
    class MyApp extends StatelessWidget {
    /// Creates main app.
    const MyApp({super.key});

    @OverRide
    Widget build(BuildContext context) {
    return const MaterialApp(
    title: 'Stopping Clicks with some DOM',
    home: MyHomePage(),
    );
    }
    }

    /// First page
    class MyHomePage extends StatefulWidget {
    /// Creates first page.
    const MyHomePage({super.key});

    @OverRide
    State createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State {
    List clicks = [];
    int tapCounter = 0;
    @OverRide
    void initState() {
    super.initState();
    clicks.add('none');
    }

    var prevCounter = 0;
    void _clickedOn(String key) {
    // calculate increment of tapCounter
    setState(() {
    clicks.add(key);
    tapCounter++;
    });
    print('Clicked on: $key ($tapCounter)');
    }

    @OverRide
    Widget build(BuildContext context) {
    final n = clicks.length;
    return Scaffold(
    appBar: AppBar(
    title: const Text('PointerInterceptor demo with Autocomplete'),
    ),
    body: Center(
    child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
    Text('Clicks counter: $tapCounter'),
    Text('last two clicks:'),
    Text(
    '\n ${clicks[n - 1]} \n ${n > 1 ? clicks[n - 2] : ''} \n',
    key: const Key('last-clicked'),
    ),

            Container(
          color: Colors.black,
          width: _videoWidth,
          height: _videoHeight,
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              NativeWidget(
                key: const ValueKey<String>('background-widget'),
                onClick: () {
                  _clickedOn('native-element');
                },
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  ExampleAutocomplete(
                    key: const Key('autocomplete'),
                    onSelect: () {
                      _clickedOn('autocomplete');
                    },
                  ),
                  PointerInterceptor(
                    child: ExampleAutocomplete(
                      hint: 'Autocomplete with PointerInterceptor',
                      key: const Key(
                        'autocomplete-with-pointer-interceptor',
                      ),
                      onSelect: () {
                        _clickedOn('autocomplete-with-pointer-interceptor');
                      },
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      setState(() {
        clicks.clear();
        clicks.add('none');
      });
    },
    tooltip: 'Clear clicks',
    child: const Icon(Icons.delete),
  ),
);

    }
    }

    /// A widget representing an underlying html view
    class NativeWidget extends StatelessWidget {
    /// Constructor
    const NativeWidget({super.key, required this.onClick});

    /// A function to run when the element is clicked
    final VoidCallback onClick;

    @OverRide
    Widget build(BuildContext context) {
    return HtmlElementView.fromTagName(
    tagName: 'div',
    onElementCreated: (el) {
    el as web.HTMLDivElement;
    el.style.width = '100%';
    el.style.height = '100%';
    el.style.backgroundColor = '#fabada';
    el.style.cursor = 'auto';
    el.id = 'background-html-view';
    el.onClick.listen((_) {
    onClick();
    });
    },
    );
    }
    }

    class ExampleAutocomplete extends StatelessWidget {
    ExampleAutocomplete({super.key, required this.onSelect, this.hint});

    final VoidCallback onSelect;
    final String? hint;

    final fruits = ['apple', 'banana'];

    @OverRide
    Widget build(BuildContext context) {
    return Autocomplete(
    onSelected: (_) {
    onSelect();
    },
    optionsBuilder: (value) => fruits,
    fieldViewBuilder:
    (context, textEditingController, focusNode, onFieldSubmitted) =>
    TextField(
    onTap: () => onSelect(),
    controller: textEditingController,
    focusNode: focusNode,
    onSubmitted: (value) {
    onFieldSubmitted();
    },
    decoration: InputDecoration(
    hintText: hint ?? 'Autocomplete',
    border: OutlineInputBorder(),
    ),
    ),
    );
    }
    }
    flutter doctor -v
    master

    [✓] Flutter (Channel master, 3.32.0-1.0.pre.90, on macOS 15.4 24E248 darwin-arm64, locale en-US) [9.7s]
    • Flutter version 3.32.0-1.0.pre.90 on channel master at /Users/mahesh/Development/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 29810cd (31 hours ago), 2025-04-16 00:07:50 +0530
    • Engine revision 29810cd
    • Dart version 3.8.0 (build 3.8.0-265.0.dev)
    • DevTools version 2.45.0-dev.0

    [✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [1,993ms]
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    This is the JDK bundled with the latest Android Studio installation on this machine.
    To manually set the JDK path, use: flutter config --jdk-dir="path/to/jdk".
    • Java version OpenJDK Runtime Environment (build 21.0.5+-12932927-b750.29)
    • All Android licenses accepted.

    [✓] Xcode - develop for iOS and macOS (Xcode 16.3) [1,369ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16E140
    • CocoaPods version 1.16.2

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

    [✓] Android Studio (version 2024.3) [130ms]
    • 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 21.0.5+-12932927-b750.29)

    [✓] IntelliJ IDEA Community Edition (version 2021.2.1) [128ms]
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

    [✓] VS Code (version 1.96.2) [18ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

    [✓] Connected device (3 available) [6.3s]
    • iPhone 15 Pro (mobile) • 7BB5BB29-BA56-4EB1-B698-E6A1AAD138E4 • ios • com.apple.CoreSimulator.SimRuntime.iOS-18-0
    (simulator)
    • macOS (desktop) • macos • darwin-arm64 • macOS 15.4 24E248 darwin-arm64
    • Chrome (web) • chrome • web-javascript • Google Chrome 131.0.6778.265

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

    • No issues found!
    stable

    [!] Flutter (Channel stable, 3.29.3, on macOS 15.4 24E248 darwin-arm64, locale en-US) [591ms]
    • Flutter version 3.29.3 on channel stable at /Users/mahesh/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ea121f8 (5 days ago), 2025-04-11 19:10:07 +0000
    • Engine revision cf56914
    • Dart version 3.7.2
    • DevTools version 2.42.3
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update
    checks and upgrades.

    [✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [2.3s]
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    This is the JDK bundled with the latest Android Studio installation on this machine.
    To manually set the JDK path, use: flutter config --jdk-dir="path/to/jdk".
    • Java version OpenJDK Runtime Environment (build 21.0.5+-12932927-b750.29)
    • All Android licenses accepted.

    [✓] Xcode - develop for iOS and macOS (Xcode 16.3) [1,559ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16E140
    • CocoaPods version 1.16.2

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

    [✓] Android Studio (version 2024.3) [152ms]
    • 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 21.0.5+-12932927-b750.29)

    [✓] IntelliJ IDEA Community Edition (version 2021.2.1) [150ms]
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

    [✓] VS Code (version 1.96.2) [22ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

    [✓] Connected device (4 available) [6.5s]
    • iPhone 15 Pro (mobile) • 7BB5BB29-BA56-4EB1-B698-E6A1AAD138E4 • ios •
    com.apple.CoreSimulator.SimRuntime.iOS-18-0 (simulator)
    • macOS (desktop) • macos • darwin-arm64 • macOS 15.4 24E248 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 15.4 24E248 darwin-arm64
    • Chrome (web) • chrome • web-javascript • Google Chrome 131.0.6778.265

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

    ! Doctor found issues in 1 category.

    hey @maheshj01 ! Yes, maybe something related with the CompositedTransformFollower in the _buildOptionsView function.

  5. yjbanov commented on May 7, 2025

    @yjbanov
    yjbanov
    on May 7, 2025
    Contributor

    This may be related to #144354. I'm not a framework expert, but I think the Autocomplete widget itself is not the pop-up, so wrapping it in PointerInterceptor won't help. The popup content needs to be wrapped in PointerInterceptor. Ideally the entire pop-up would be automatically wrapped (as part of us fixing #144354), but a workaround might be to wrap each individual option.

  6. flutter-zl
    added
    P2Important issues not at the top of the work list
    triaged-webTriaged by Web platform team
    on May 7, 2025

  7. harryterkelsen commented on Nov 12, 2026

    @harryterkelsen
    harryterkelsen
    on Nov 12, 2026
    Contributor

    Linking to umbrella issue #190574 (Automatic Pointer Interceptors for Platform Views on Web): once automatic pointer interception is enabled by default on the web, Flutter overlays painted above HtmlElementView / <iframe> platform views (including popup routes, modal barriers, and OverlayPortal followers) automatically receive hit-test proxies without needing manual PointerInterceptor wrappers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listfound in release: 3.29Found to occur in 3.29found in release: 3.32Found to occur in 3.32has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: pointer_interceptorA widget to prevent clicks from being swallowed by underlying HtmlElementViews on the webpackageflutter/packages repository. See also p: labels.team-webOwned by Web platform teamtriaged-webTriaged by Web platform team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions