RarDog/Prisma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 67 Wiki Activity

fix: migrate search suggestions to OverlayPortal, unblock toolbar & chip touches (v2.3.4)

Browse Source
This commit is contained in:
RarDog
2026-09-04 13:23:17 +03:00
parent ce78a1f47f
commit fe4777c4b3
6 changed files with 372 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/app/changelog.dart
+11
View File
@@ -1,4 +1,15 @@
const lunarisChangelog = [
LunarisChange(
version: '2.3.4',
title: 'OverlayPortal Architecture & Search UI Unblocking',
bullets: [
'OverlayPortal Migration: replaced manual root OverlayEntry and translucent backdrop with Flutter native OverlayPortal and TapRegion. Completely eliminates ghost overlay leaks and touch interception.',
'Unblocked Toolbar & Search Bar GUI: buttons (Refresh / Обновить, Clear Filters / Сбросить, random post, filter chips) and search chip crosses now respond immediately to taps without being swallowed by overlay backdrops.',
'Instant Chip Removal: deleting a tag chip (via its X cross icon) now updates the search immediately in real time, synchronizing the feed without restoring deleted tags on rebuild.',
'Search Clear Synchronization: tapping the search bar clear button (X) resets the query and clears active filters immediately.',
'Non-Blocking Outside Tap: tapping outside the suggestion dropdown smoothly dismisses suggestions while allowing the touch event to pass through directly to the underlying button or post.',
],
),
LunarisChange(
version: '2.3.3',
title: 'Tag Suggestions Overlay Fix & Rule34 API Alignment',
lib/features/feed/presentation/widgets/feed_toolbar.dart
+16
View File
@@ -98,6 +98,14 @@ class _FeedToolbarState extends State<FeedToolbar> {
_query = value;
widget.onSuggestionTap(value);
},
onTagRemoved: (value) {
_query = value;
widget.onSearch(value);
},
onCleared: () {
_query = '';
widget.onClearFilters();
},
),
),
const SizedBox(width: 8),
@@ -221,6 +229,14 @@ class _FeedToolbarState extends State<FeedToolbar> {
_query = value;
widget.onSuggestionTap(value);
},
onTagRemoved: (value) {
_query = value;
widget.onSearch(value);
},
onCleared: () {
_query = '';
widget.onClearFilters();
},
),
),
const SizedBox(width: 6),
lib/features/search/presentation/search_screen.dart
+6
View File
@@ -105,6 +105,12 @@ class _SearchScreenState extends ConsumerState<SearchScreen> {
onSuggestionApplied: (query) => ref
.read(searchControllerProvider.notifier)
.updateQuery(query),
onTagRemoved: (query) => ref
.read(searchControllerProvider.notifier)
.updateQuery(query),
onCleared: () => ref
.read(searchControllerProvider.notifier)
.updateQuery(''),
),
const SizedBox(height: 12),
SingleChildScrollView(
lib/shared/widgets/app_search_bar.dart
+149 -123
View File
@@ -28,6 +28,8 @@ class TagInputSearchBar extends StatefulWidget {
required this.onSubmitted,
this.onChanged,
this.onSuggestionApplied,
this.onTagRemoved,
this.onCleared,
this.initialValue,
this.hintText = 'Search tags',
this.suggestions = const [],
@@ -37,6 +39,8 @@ class TagInputSearchBar extends StatefulWidget {
final ValueChanged<String> onSubmitted;
final ValueChanged<String>? onChanged;
final ValueChanged<String>? onSuggestionApplied;
final ValueChanged<String>? onTagRemoved;
final VoidCallback? onCleared;
final String? initialValue;
final String hintText;
final List<TagSuggestion> suggestions;
@@ -48,10 +52,10 @@ class TagInputSearchBar extends StatefulWidget {
class _TagInputSearchBarState extends State<TagInputSearchBar> {
final _fieldKey = GlobalKey();
final _layerLink = LayerLink();
final _portalController = OverlayPortalController();
late final TextEditingController _controller;
late final FocusNode _focusNode;
late final ScrollController _tagScrollController;
OverlayEntry? _suggestionsOverlay;
Timer? _debounce;
List<String> _tags = [];
String _lastExternalValue = '';
@@ -70,8 +74,8 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
}
void _handleControllerChanged() {
if (_controller.text.trim().isEmpty && _suggestionsOverlay != null) {
_removeSuggestionsOverlay();
if (_controller.text.trim().isEmpty && _portalController.isShowing) {
_portalController.hide();
}
}
@@ -87,14 +91,16 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
_localDirty = false;
}
if (oldWidget.suggestions != widget.suggestions) {
_syncSuggestionsOverlay();
_syncSuggestions();
}
}
@override
void dispose() {
_debounce?.cancel();
_removeSuggestionsOverlay();
if (_portalController.isShowing) {
_portalController.hide();
}
_tagScrollController.dispose();
_controller.removeListener(_handleControllerChanged);
_focusNode.removeListener(_handleFocusChanged);
@@ -106,7 +112,9 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
void _handleFocusChanged() {
if (!mounted) return;
if (!_focusNode.hasFocus) {
_removeSuggestionsOverlay();
if (_portalController.isShowing) {
_portalController.hide();
}
if (!_localDirty) {
final next = widget.initialValue ?? '';
if (next != _lastExternalValue) {
@@ -115,18 +123,103 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
}
}
} else {
_syncSuggestionsOverlay();
_syncSuggestions();
}
setState(() {});
}
void _syncSuggestions() {
if (!mounted) return;
final token = _activeToken;
if (!_focusNode.hasFocus || token.isEmpty) {
if (_portalController.isShowing) {
_portalController.hide();
}
return;
}
final matches = _matchingSuggestions;
if (matches.isEmpty) {
if (_portalController.isShowing) {
_portalController.hide();
}
return;
}
if (!_portalController.isShowing) {
_portalController.show();
}
}
List<TagSuggestion> get _matchingSuggestions {
final token = _activeToken;
if (token.isEmpty) return const [];
return widget.suggestions
.where((item) => item.name.toLowerCase().startsWith(token))
.toList(growable: false);
}
void _hideSuggestions() {
if (_portalController.isShowing) {
_portalController.hide();
}
_focusNode.unfocus();
}
void _scrollToEnd() {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (_tagScrollController.hasClients) {
_tagScrollController.animateTo(
_tagScrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 200),
curve: Curves.easeOut,
);
}
});
}
@override
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) _syncSuggestionsOverlay();
});
return CompositedTransformTarget(
return TapRegion(
groupId: _fieldKey,
onTapOutside: (_) => _hideSuggestions(),
child: OverlayPortal(
controller: _portalController,
overlayChildBuilder: (context) {
final token = _activeToken;
final suggestions = _matchingSuggestions;
if (suggestions.isEmpty || token.isEmpty) {
return const SizedBox.shrink();
}
final renderBox =
_fieldKey.currentContext?.findRenderObject() as RenderBox?;
final width =
renderBox?.hasSize == true ? renderBox!.size.width : 360.0;
final height =
renderBox?.hasSize == true ? renderBox!.size.height : 48.0;
return CompositedTransformFollower(
link: _layerLink,
showWhenUnlinked: false,
offset: Offset(0, height + 6),
child: Align(
alignment: Alignment.topLeft,
child: TapRegion(
groupId: _fieldKey,
child: SizedBox(
width: width.clamp(280.0, 620.0),
child: _TagSuggestionDropdown(
suggestions: suggestions,
query: token,
onSelected: _applySuggestion,
),
),
),
),
);
},
child: CompositedTransformTarget(
link: _layerLink,
child: DecoratedBox(
key: _fieldKey,
@@ -145,11 +238,13 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
borderRadius: BorderRadius.circular(22),
onTap: _focusNode.requestFocus,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 7),
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 7),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.search_rounded, color: scheme.onSurfaceVariant),
Icon(Icons.search_rounded,
color: scheme.onSurfaceVariant),
const SizedBox(width: 8),
Expanded(
child: SizedBox(
@@ -179,7 +274,8 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
focusNode: _focusNode,
autocorrect: false,
enableSuggestions: false,
textInputAction: TextInputAction.search,
textInputAction:
TextInputAction.search,
onSubmitted: (_) => _submit(),
onChanged: _handleDraftChanged,
decoration: InputDecoration(
@@ -188,11 +284,13 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
filled: false,
contentPadding: const EdgeInsets.symmetric(
contentPadding:
const EdgeInsets.symmetric(
vertical: 8,
),
hintText:
_tags.isEmpty ? widget.hintText : 'tag',
hintText: _tags.isEmpty
? widget.hintText
: 'tag',
prefixIcon: null,
suffixIcon: null,
),
@@ -216,56 +314,9 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
),
),
),
);
}
void _syncSuggestionsOverlay() {
final token = _activeToken;
if (!_focusNode.hasFocus || token.isEmpty) {
_removeSuggestionsOverlay();
return;
}
final suggestions = widget.suggestions
.where((item) => item.name.toLowerCase().startsWith(token))
.toList(growable: false);
if (suggestions.isEmpty) {
_removeSuggestionsOverlay();
return;
}
final overlay = Overlay.maybeOf(context);
final renderBox =
_fieldKey.currentContext?.findRenderObject() as RenderBox?;
if (overlay == null || renderBox == null || !renderBox.hasSize) {
_removeSuggestionsOverlay();
return;
}
final size = renderBox.size;
_removeSuggestionsOverlay();
_suggestionsOverlay = OverlayEntry(
builder: (context) => _TagSuggestionOverlay(
link: _layerLink,
width: size.width,
yOffset: size.height + 8,
suggestions: suggestions,
query: token,
onSelected: _applySuggestion,
onDismiss: () {
_removeSuggestionsOverlay();
_focusNode.unfocus();
},
),
),
);
overlay.insert(_suggestionsOverlay!);
}
void _removeSuggestionsOverlay() {
if (_suggestionsOverlay != null) {
if (_suggestionsOverlay!.mounted) {
_suggestionsOverlay!.remove();
}
_suggestionsOverlay = null;
}
}
Widget _buildTagChip(BuildContext context, String tag) {
@@ -331,7 +382,9 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
_localDirty = true;
if (value.trim().isEmpty) {
_debounce?.cancel();
_removeSuggestionsOverlay();
if (_portalController.isShowing) {
_portalController.hide();
}
setState(() {});
_notifyChanged();
return;
@@ -361,12 +414,18 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
}
_controller.clear();
});
if (_portalController.isShowing) {
_portalController.hide();
}
_scrollToEnd();
_notifyChanged();
}
void _submit() {
_debounce?.cancel();
_removeSuggestionsOverlay();
if (_portalController.isShowing) {
_portalController.hide();
}
_commitDraft(_controller.text);
_lastExternalValue = _query;
_localDirty = false;
@@ -376,18 +435,26 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
void _clear() {
_debounce?.cancel();
_removeSuggestionsOverlay();
_localDirty = true;
if (_portalController.isShowing) {
_portalController.hide();
}
_localDirty = false;
setState(() {
_tags = [];
_controller.clear();
});
_lastExternalValue = '';
_notifyChanged();
_focusNode.unfocus();
widget.onCleared?.call();
widget.onSubmitted('');
}
void _editTag(String tag) {
_localDirty = true;
if (_portalController.isShowing) {
_portalController.hide();
}
setState(() {
_tags = _tags.where((item) => item != tag).toList(growable: true);
_controller.value = TextEditingValue(
@@ -401,10 +468,17 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
void _removeTag(String tag) {
_localDirty = true;
if (_portalController.isShowing) {
_portalController.hide();
}
setState(() {
_tags = _tags.where((item) => item != tag).toList(growable: true);
});
_lastExternalValue = _query;
_notifyChanged();
if (widget.onTagRemoved != null) {
widget.onTagRemoved!(_query);
}
}
void _applySuggestion(String suggestion) {
@@ -427,8 +501,12 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
}
_controller.clear();
});
if (_portalController.isShowing) {
_portalController.hide();
}
_lastExternalValue = _query;
_scrollToEnd();
_notifyChanged();
_removeSuggestionsOverlay();
widget.onSuggestionApplied?.call(_query);
_focusNode.requestFocus();
}
@@ -441,7 +519,7 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
void _notifyChanged() {
_localDirty = true;
widget.onChanged?.call(_query);
_syncSuggestionsOverlay();
_syncSuggestions();
}
List<String> _parseTags(String query) {
@@ -472,58 +550,6 @@ class _TagInputSearchBarState extends State<TagInputSearchBar> {
bool get _isEditing => _focusNode.hasFocus || _localDirty;
}
class _TagSuggestionOverlay extends StatelessWidget {
const _TagSuggestionOverlay({
required this.link,
required this.width,
required this.yOffset,
required this.suggestions,
required this.query,
required this.onSelected,
required this.onDismiss,
});
final LayerLink link;
final double width;
final double yOffset;
final List<TagSuggestion> suggestions;
final String query;
final ValueChanged<String> onSelected;
final VoidCallback onDismiss;
@override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned.fill(
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: onDismiss,
),
),
Positioned.fill(
child: CompositedTransformFollower(
link: link,
showWhenUnlinked: false,
offset: Offset(0, yOffset),
child: Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: width.clamp(280, 620).toDouble(),
child: _TagSuggestionDropdown(
suggestions: suggestions,
query: query,
onSelected: onSelected,
),
),
),
),
),
],
);
}
}
class _TagSuggestionDropdown extends StatelessWidget {
const _TagSuggestionDropdown({
required this.suggestions,
pubspec.yaml
+1 -1
View File
@@ -1,7 +1,7 @@
name: gel_rule_app
description: Local backend/core layer for a Flutter booru browser app.
publish_to: "none"
version: 2.3.3+43
version: 2.3.4+44
environment:
sdk: ">=3.3.0 <4.0.0"
test/shared/tag_input_search_bar_test.dart
+117
View File
@@ -339,6 +339,123 @@ void main() {
expect(find.text('AND'), findsOneWidget);
expect(find.text('dog'), findsOneWidget);
});
testWidgets('deleting chip triggers onTagRemoved', (tester) async {
String? removedQuery;
await tester.pumpWidget(_Harness(
child: TagInputSearchBar(
initialValue: 'cat dog',
onSubmitted: (_) {},
onTagRemoved: (query) => removedQuery = query,
),
));
expect(find.text('cat'), findsOneWidget);
expect(find.text('dog'), findsOneWidget);
await tester.tap(find.byIcon(Icons.close_rounded).first);
await tester.pump();
expect(removedQuery, 'dog');
expect(find.text('cat'), findsNothing);
expect(find.text('dog'), findsOneWidget);
});
testWidgets('clear button triggers onCleared and onSubmitted with empty string',
(tester) async {
bool cleared = false;
String? submitted;
await tester.pumpWidget(_Harness(
child: TagInputSearchBar(
initialValue: 'cat dog',
onSubmitted: (query) => submitted = query,
onCleared: () => cleared = true,
),
));
await tester.tap(find.byTooltip('Clear'));
await tester.pump();
expect(cleared, isTrue);
expect(submitted, '');
expect(find.text('cat'), findsNothing);
expect(find.text('dog'), findsNothing);
});
testWidgets(
'tapping external button while suggestions are visible triggers button and hides suggestions',
(tester) async {
bool externalButtonPressed = false;
await tester.pumpWidget(MaterialApp(
home: Scaffold(
body: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: TagInputSearchBar(
suggestions: const [
TagSuggestion(
name: 'genshin',
category: TagCategory.copyright,
postCount: 100,
providerId: 'test',
),
],
onSubmitted: (_) {},
),
),
const SizedBox(width: 8),
ElevatedButton(
onPressed: () => externalButtonPressed = true,
child: const Text('Обновить'),
),
],
),
),
),
));
await tester.tap(find.byType(TextField));
await tester.enterText(find.byType(TextField), 'gen');
await tester.pumpAndSettle();
expect(find.text('genshin'), findsOneWidget);
// Tap external 'Обновить' button directly while suggestions are up
await tester.tap(find.text('Обновить'));
await tester.pumpAndSettle();
expect(externalButtonPressed, isTrue);
expect(find.text('genshin'), findsNothing);
});
testWidgets('erasing draft immediately hides suggestions', (tester) async {
await tester.pumpWidget(_Harness(
child: TagInputSearchBar(
suggestions: const [
TagSuggestion(
name: 'genshin',
category: TagCategory.copyright,
postCount: 100,
providerId: 'test',
),
],
onSubmitted: (_) {},
),
));
await tester.tap(find.byType(TextField));
await tester.enterText(find.byType(TextField), 'gen');
await tester.pumpAndSettle();
expect(find.text('genshin'), findsOneWidget);
await tester.enterText(find.byType(TextField), '');
await tester.pumpAndSettle();
expect(find.text('genshin'), findsNothing);
});
}
class _Harness extends StatelessWidget {