diff --git a/doc/adr/0001-fix-tap-event-is-not-simulated-in-a-overlay-on-flutter-3-7-for-web-desktop.md b/doc/adr/0001-fix-tap-event-is-not-simulated-in-a-overlay-on-flutter-3-7-for-web-desktop.md new file mode 100644 index 0000000..0365173 --- /dev/null +++ b/doc/adr/0001-fix-tap-event-is-not-simulated-in-a-overlay-on-flutter-3-7-for-web-desktop.md @@ -0,0 +1,23 @@ +# 1. Fix tap event is not simulated in a overlay on Flutter 3.7 for Web/Desktop + +Date: 2023-04-24 + +## Status + +Accepted + +## Context + +Tap events are not being simulated to overlay on the `Web/Desktop` but work fine on mobile devices. This worked fine until the previous release stable 3.3. + +## Root causes + +Because the thing that the overlay is attached to is a `TextField`, so in order to keep from unfocused the text field when tapping outside of it, you need to tell the overlay widget that it's part of the TextField for purposes of the `tap outside` behavior by adding the `TextFieldTapRegion` around it, so that when the tap arrives, it's considered `inside` of the text field. + +## Decision + +Try wrapping a `TextFieldTapRegion` around the `Material` in the overlay. + +## Consequences + +This worked fine diff --git a/lib/tag_editor.dart b/lib/tag_editor.dart index 0c9ae4e..0552733 100644 --- a/lib/tag_editor.dart +++ b/lib/tag_editor.dart @@ -332,77 +332,82 @@ class TagsEditorState extends State> { initialData: _suggestions, builder: (context, snapshot) { if (snapshot.hasData && snapshot.data!.isNotEmpty) { - final suggestionsListView = PointerInterceptor( - child: AutocompleteHighlightedOption( - highlightIndexNotifier: _highlightedOptionIndex, - child: ValidationSuggestionItem( - validationNotifier: _validationSuggestionItemNotifier, - child: Padding( - padding: widget.suggestionMargin ?? EdgeInsets.zero, - child: Material( - elevation: widget.suggestionsBoxElevation ?? 20, - borderRadius: BorderRadius.circular( - widget.suggestionsBoxRadius ?? 20), - color: widget.suggestionsBoxBackgroundColor ?? - Colors.white, - child: ClipRRect( + final suggestionsListView = TextFieldTapRegion( + child: PointerInterceptor( + child: AutocompleteHighlightedOption( + highlightIndexNotifier: _highlightedOptionIndex, + child: ValidationSuggestionItem( + validationNotifier: _validationSuggestionItemNotifier, + child: Padding( + padding: widget.suggestionMargin ?? EdgeInsets.zero, + child: Material( + elevation: widget.suggestionsBoxElevation ?? 20, borderRadius: BorderRadius.circular( widget.suggestionsBoxRadius ?? 20), - child: Container( - decoration: BoxDecoration( - color: - widget.suggestionsBoxBackgroundColor ?? - Colors.white, - borderRadius: BorderRadius.all( - Radius.circular( - widget.suggestionsBoxRadius ?? 0))), - constraints: BoxConstraints( - maxHeight: suggestionBoxHeight), - child: ListView.builder( - shrinkWrap: true, - padding: widget.suggestionPadding ?? - EdgeInsets.zero, - itemCount: snapshot.data!.length, - itemBuilder: (context, index) { - if (_suggestions != null && - _suggestions?.isNotEmpty == true) { - final item = _suggestions![index]; - final highlight = - AutocompleteHighlightedOption.of( - context) == - index; - final suggestionValid = - ValidationSuggestionItem.of(context); - - if (!widget.useDefaultHighlight) { - return widget.suggestionBuilder( - context, - this, - item, - index, - snapshot.data!.length, - highlight, - suggestionValid); + color: widget.suggestionsBoxBackgroundColor ?? + Colors.white, + child: ClipRRect( + borderRadius: BorderRadius.circular( + widget.suggestionsBoxRadius ?? 20), + child: Container( + decoration: BoxDecoration( + color: widget + .suggestionsBoxBackgroundColor ?? + Colors.white, + borderRadius: BorderRadius.all( + Radius.circular( + widget.suggestionsBoxRadius ?? + 0))), + constraints: BoxConstraints( + maxHeight: suggestionBoxHeight), + child: ListView.builder( + shrinkWrap: true, + padding: widget.suggestionPadding ?? + EdgeInsets.zero, + itemCount: snapshot.data!.length, + itemBuilder: (context, index) { + if (_suggestions != null && + _suggestions?.isNotEmpty == true) { + final item = _suggestions![index]; + final highlight = + AutocompleteHighlightedOption.of( + context) == + index; + final suggestionValid = + ValidationSuggestionItem.of( + context); + + if (!widget.useDefaultHighlight) { + return widget.suggestionBuilder( + context, + this, + item, + index, + snapshot.data!.length, + highlight, + suggestionValid); + } else { + return Container( + color: highlight + ? widget.itemHighlightColor ?? + Theme.of(context) + .focusColor + : null, + child: widget.suggestionBuilder( + context, + this, + item, + index, + snapshot.data!.length, + highlight, + suggestionValid)); + } } else { - return Container( - color: highlight - ? widget.itemHighlightColor ?? - Theme.of(context).focusColor - : null, - child: widget.suggestionBuilder( - context, - this, - item, - index, - snapshot.data!.length, - highlight, - suggestionValid)); + return Container(); } - } else { - return Container(); - } - }, - )), + }, + )), + ), ), ), ), @@ -415,14 +420,12 @@ class TagsEditorState extends State> { link: _layerLink, showWhenUnlinked: false, offset: compositedTransformFollowerOffset, - child: TextFieldTapRegion( - child: !showTop + child: !showTop ? suggestionsListView : FractionalTranslation( translation: const Offset(0, -1), child: suggestionsListView, ), - ), ), ); }