Dropdown items do not update on scroll, with pagination

[MushtaqAhmadMir]

When using the MultiSelectableDropDown widget with pagination, the dropdown items do not update correctly when scrolling to the end to load more items. The API call is made and new data is received, but the dropdown list does not refresh with the new items.

Steps to Reproduce:

Implement the MultiSelectableDropDown widget with async item loading and pagination. Scroll to the bottom of the dropdown list to trigger the onEndReached event. Observe that the API call is made, new data is fetched, but the dropdown does not update with the new items.

Expected Behavior: The dropdown should remain open and display the newly loaded items at the end of the list.

Actual Behavior: The dropdown does not refresh with the new items. The list remains the same.

Dropdown Implementation:

MultiSelectableDropDown<SuggestionData>(
  dropdownHeight: 200,
  isFilterOnline: false,
  showSelectedItems: true,
  labelText: StringManager.verticals,
  hintText: "Select ${StringManager.verticals}",
  enabled: cubit.state.globalEnabler,
  showSearchBox: true,
  fillColor: Colors.white,
  asyncItems: (searchInput) {
    return Future.value(state.industrySuggestion);
  },
  footerLoading: state.loadingIndustries,
  onEndReached: (value) {
    if (value) {
      cubit.loadMoreIndustries();
    }
  },
  compareFn: (item1, item2) {
    return item1.name == item2.name;
  },
  onChanged: (value) {
    cubit.addSelectedIndustries(value);
  },
  shouldRemoveItem: (item) {
    cubit.removeCategoriesBasedOnIndustryId(item?.id ?? '');
    if (item == null) return Future.value(true);
    return Future.value(true);
  },
  selectedItems: state.selectedIndustries.map((e) => SuggestionData(e.name, e.industryId)).toList(),
);

Scroll Controller:

_scrollController.addListener(() {
  if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent) {
    widget.onEndReached?.call(true);
    print('reached end');
  }
});

Container Builder:

containerBuilder: (context, popUpWidget) {
  return Container(
    padding: const EdgeInsets.only(bottom: 5, top: 5),
    child: SingleChildScrollView(
      controller: _scrollController,
      child: Column(
        children: [
          popUpWidget,
          Visibility(
            visible: widget.footerLoading,
            child: const Padding(
              padding: EdgeInsets.all(12),
              child: SizedBox(height: 20, width: 20, child: CircularProgressIndicator()),
            ),
          )
        ],
      ),
    ),
  );
},

Cubit Functions:

void loadMoreIndustries() {
  if (state.hasMoreIndustries) {
    emit(
      state.copyWith(
        listIndustryCurrentPage: state.listIndustryCurrentPage + 1,
        loadingIndustries: true,
      ),
    );
    initIndustries();
  }
}

Future<List<SuggestionData>> initIndustries() async {
  List<SuggestionData> allSuggestion = [];
  await _listIndustryUseCase.invoke(
    input: ListVerticalInput(
      page: state.listIndustryCurrentPage,
      limit: ApiConstants.limit,
      searchString: '',
    ),
    callback: (value) {
      if (value.isSuccess()) {
        if (value.data?.verticals.isNotEmpty ?? false) {
          List<SuggestionData> industrySuggestion = [];
          for (VerticalModel industry in value.data?.verticals ?? []) {
            industrySuggestion = List<SuggestionData>.from(industrySuggestion)
              ..add(SuggestionData(industry.name, industry.industryId));
          }
          allSuggestion = [...state.industrySuggestion, ...industrySuggestion];
          bool hasMoreData = value.data?.verticals.length == ApiConstants.limit;
          emit(
            state.copyWith(
              listIndustryResource: value,
              industrySuggestion:  allSuggestion ,
              loadingIndustries: false,
              hasMoreIndustries: hasMoreData,
            ),
          );
        } else {
          emit(
            state.copyWith(
              listIndustryResource: value,
              loadingIndustries: false,
              hasMoreIndustries: false,
            ),
          );
        }
      }
      if (value.isError()) {
        emit(
          state.copyWith(
            listIndustryResource: value,
            loadingIndustries: false,
          ),
        );
      }
    },
  );
  return allSuggestion;
}

[salim-lachdhaf]

MultiSelectableDropDown is not our widget.