Suggestions are not scrollable using the Scrollbar

[MuhamadHaydar]

Describe the bug The scroll button issue while you want to scroll with the scroll button, as most scrollable lists when you hold the scroll button, you can scroll upward or downward just by holding the button.

To Reproduce Reproduce:

1. searchfield: ^1.0.1
2. Flutter 3.19.6 (latest)

Expected behavior: The scroll button works upward or downward.

Actual behavior The scroll button will disappear when you tap it.

Screenshots

Code:

SearchField<JobType>(
                    hint: 'job_type'.tr.capitalizeWords,
                    maxSuggestionsInViewPort: 6,
                    searchStyle: AppTextStyle.bodySmall(),
                     onSuggestionTap: (value) {
                       _basicDetailController.selectedCity = value.item!;
                     },
                     validator: _basicDetailController.completeProfileFormValidator
                         .getValidation('company_city'),
                     controller: _basicDetailController.completeProfileFormValidator
                         .getController('company_city'),
                    searchInputDecoration: InputDecoration(
                      border: outlineInputBorder,
                      focusedBorder: focusedInputBorder,
                      enabledBorder: outlineInputBorder,
                      hintStyle: AppTextStyle.bodySmall(xMuted: true),
                      contentPadding: AppSpacing.all(16),
                      isCollapsed: true,
                      floatingLabelBehavior: FloatingLabelBehavior.never,
                      suffixIcon: Icon(Icons.keyboard_arrow_down_outlined),
                    ),
                    scrollbarDecoration: ScrollbarDecoration(
                      trackVisibility: true,
                    ),
                    suggestions: DatabaseService.getAllJobTypeSettingData()
                        .map(
                          (jobType) => SearchFieldListItem<JobType>(
                        Utils.getLocalValueOfObject(jobType.currentValue),
                        item: jobType,
                        // Use child to show Custom Widgets in the suggestions
                        // defaults to Text widget
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Row(
                            children: [
                              SizedBox(
                                width: 10,
                              ),
                              Text(
                                Utils.getLocalValueOfObject(
                                    jobType.currentValue).toString().capitalizeWords,
                                style: AppTextStyle.bodyMedium(),
                              ),
                            ],
                          ),
                        ),
                      ),
                    )
                        .toList(),
                  ),

[maheshj01]

Thanks for filing the issue @MuhamadHaydar Thanks for filing the issue. I have that on the roadmap to fix it soon. If you are interested PRs are welcome to expedite the fix.

[maheshj01]

Notes for self:

SearchField suggestions overlay is shown based on the SearchField focus, if the input looses the focus the overlay is hidden. When the user interacts with the scrollbar, the focus is lost and the overlay is hidden. Technically before the gesture reaches the scrollbar overlay is hidden.

One solution would be to have a uni focus for both Search input and the suggestions focus of which would decide whether ot not to show the suggestions

Alternatively if we can detect when the focus switched to Suggestions we should prevent hiding of overlay.

[maheshj01]

Fixed and released in v1.0.3

cc: @MuhamadHaydar @Groseuros

[Groseuros]

@maheshmnj Works perfectly, thank you!

[MuhamadHaydar]

Thanks for your efforts! @maheshmnj