diff --git a/lib/common/dialog_textfield_dropdown.dart b/lib/common/dialog_textfield_dropdown.dart index 807f3417..9c508f28 100644 --- a/lib/common/dialog_textfield_dropdown.dart +++ b/lib/common/dialog_textfield_dropdown.dart @@ -20,15 +20,22 @@ class DialogTextfieldDropdown extends StatefulWidget { class _DialogTextfieldDropdownState extends State { bool _isOpen = false; - late OverlayEntry _overlayEntry; + OverlayEntry? _overlayEntry; final TextEditingController _controller = TextEditingController(); - late List _filteredItems; // Filtered items list + final FocusNode _focusNode = FocusNode(); + List _filteredItems = []; @override void initState() { super.initState(); - _controller.text = widget.initialValue ?? 'Select Tag'; - _filteredItems = List.from(widget.items); // Initialize filtered items + _controller.text = widget.initialValue ?? ''; + _filteredItems = List.from(widget.items); + + _focusNode.addListener(() { + if (!_focusNode.hasFocus) { + _closeDropdown(); + } + }); } void _toggleDropdown() { @@ -41,13 +48,16 @@ class _DialogTextfieldDropdownState extends State { void _openDropdown() { _overlayEntry = _createOverlayEntry(); - Overlay.of(context).insert(_overlayEntry); + Overlay.of(context).insert(_overlayEntry!); _isOpen = true; } void _closeDropdown() { - _overlayEntry.remove(); - _isOpen = false; + if (_isOpen && _overlayEntry != null) { + _overlayEntry!.remove(); + _overlayEntry = null; + _isOpen = false; + } } OverlayEntry _createOverlayEntry() { @@ -58,9 +68,7 @@ class _DialogTextfieldDropdownState extends State { return OverlayEntry( builder: (context) { return GestureDetector( - onTap: () { - _closeDropdown(); - }, + onTap: _closeDropdown, behavior: HitTestBehavior.translucent, child: Stack( children: [ @@ -72,40 +80,26 @@ class _DialogTextfieldDropdownState extends State { elevation: 4.0, child: Container( color: ColorsManager.whiteColors, - constraints: const BoxConstraints( - maxHeight: 200.0, - ), - child: ListView.builder( - shrinkWrap: true, - itemCount: _filteredItems.length, - itemBuilder: (context, index) { - final item = _filteredItems[index]; - return Container( - decoration: const BoxDecoration( - border: Border( - bottom: BorderSide( - color: ColorsManager.lightGrayBorderColor, - width: 1.0, + constraints: const BoxConstraints(maxHeight: 200.0), + child: StatefulBuilder( + builder: (context, setStateDropdown) { + return ListView.builder( + shrinkWrap: true, + itemCount: _filteredItems.length, + itemBuilder: (context, index) { + final item = _filteredItems[index]; + return ListTile( + title: Text( + item, + style: const TextStyle(color: Colors.black), ), - ), - ), - child: ListTile( - title: Text(item, - style: Theme.of(context) - .textTheme - .bodyMedium - ?.copyWith( - color: ColorsManager.textPrimaryColor)), - onTap: () { - _controller.text = item; - widget.onSelected(item); - setState(() { - _filteredItems - .remove(item); // Remove selected item - }); - _closeDropdown(); - }, - ), + onTap: () { + _controller.text = item; + widget.onSelected(item); + _closeDropdown(); + }, + ); + }, ); }, ), @@ -122,7 +116,8 @@ class _DialogTextfieldDropdownState extends State { @override Widget build(BuildContext context) { return GestureDetector( - onTap: _toggleDropdown, + onTap: () => FocusScope.of(context).unfocus(), + behavior: HitTestBehavior.opaque, child: Container( padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0), decoration: BoxDecoration( @@ -135,23 +130,26 @@ class _DialogTextfieldDropdownState extends State { Expanded( child: TextFormField( controller: _controller, - onChanged: (value) { - setState(() { - _filteredItems = widget.items - .where((item) => - item.toLowerCase().contains(value.toLowerCase())) - .toList(); // Filter items dynamically - }); + focusNode: _focusNode, + onFieldSubmitted: (value) { widget.onSelected(value); + _closeDropdown(); }, - style: Theme.of(context).textTheme.bodyMedium, + onTapOutside: (event) { + widget.onSelected(_controller.text); + _closeDropdown(); + }, + style: const TextStyle(color: Colors.black), decoration: const InputDecoration( - hintText: 'Enter or Select tag', + hintText: 'Enter or Select a tag', border: InputBorder.none, ), ), ), - const Icon(Icons.arrow_drop_down), + GestureDetector( + onTap: _toggleDropdown, + child: const Icon(Icons.arrow_drop_down), + ), ], ), ),