On mobile once keyboard open it's pushing the dropdown to top

[prasanmoonraft]

On mobile it's pushing the entire drop down to top once you tap on the search box, also it's has used to filter the data based on location

[AhmedLSayed9]

Pushing the dropdown to top when keyboard open is desired. What's the issue exactly here?

[prasanmoonraft]

It should go with the component right not only dropdown also, if you see only half of the component is visible and not able to properly search also @AhmedLSayed9

[AhmedLSayed9]

Can you show minimal sample that produces the issue?

[prasanmoonraft]

class CustomSearchDropDown extends StatefulWidget {
final String hint;
final bool enabled;
final String? value;
final double? menuMaxHeight;
final List items;
final void Function(String?)? onChanged;

const CustomSearchDropDown({
super.key,
this.value,
this.hint = "",
this.onChanged,
this.menuMaxHeight,
required this.enabled,
required this.items,
});

@OverRide
State createState() => _CustomSearchDropDownState();
}

class _CustomSearchDropDownState extends State {
String? selectedValue;
TextEditingController textEditingController = TextEditingController();

@OverRide
Widget build(BuildContext context) {
return DropdownButtonHideUnderline(
child: DropdownButton2(
isExpanded: true,
hint: Text(
widget.items[0].location,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.labelLargeTStar800,
),
items: widget.items
.map((item) => DropdownMenuItem(
value: item,
child: Text(
item.location,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.labelLargeTStar800,
),
))
.toList(),
value: selectedValue != null
? widget.items.firstWhere((item) => item.id == selectedValue)
: null,
onChanged: (value) {
setState(() {
selectedValue = value?.id;
widget.enabled ? widget.onChanged!(value?.id) : null;
});
},
buttonStyleData: ButtonStyleData(
width: 175.0.w,
padding: EdgeInsets.only(right: 8.0.s),
decoration: BoxDecoration(
border: Border.all(color: AppColors.white),
color: AppColors.white,
),
),
iconStyleData: IconStyleData(
icon: SvgAssetWidget(
image: SvgImages.downArrowIcon,
height: 16.0.w,
width: 16.0.w,
),
),
dropdownStyleData: DropdownStyleData(
width: 175.0.w,
decoration: BoxDecoration(
color: AppColors.white,
border: Border.all(color: Colors.transparent),
),
maxHeight: widget.menuMaxHeight,
),
menuItemStyleData: MenuItemStyleData(
height: 40.0.w,
selectedMenuItemBuilder: (ctx, child) {
return Container(
color: AppColors.alto,
child: child,
);
},
),
dropdownSearchData: DropdownSearchData(
searchController: textEditingController,
searchInnerWidgetHeight: 38.0.w,
searchInnerWidget: SizedBox(
height: 38.0.w,
child: TextFormField(
expands: true,
maxLines: null,
style: Theme.of(context).textTheme.bodyLargeTStar,
controller: textEditingController,
decoration: InputDecoration(
isDense: true,
focusColor: AppColors.white,
contentPadding: EdgeInsets.all(8.0.s),
hintText: Strings.search,
hintStyle: Theme.of(context).textTheme.bodyLargeTStarGray,
),
),
),
searchMatchFn: (item, searchValue) {
final location = item.value?.location ?? '';
final locationLower = location.toLowerCase();
final searchValueLower = searchValue.toLowerCase();
return locationLower.contains(searchValueLower);
},
),
onMenuStateChange: (isOpen) {
if (!isOpen) {
textEditingController.clear();
}
},
),
);
}
}
Container(
height: isMobile ? null : 40.0.w,
padding: EdgeInsets.only(
right: 16.0.s,
),
margin: const EdgeInsets.all(0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SvgAssetWidget(
image: SvgImages.importantContactIcon,
width: 24.0.w,
height: 24.0.h,
),
SizedBox(width: 12.0.w),
SizedBox(
width: 100.0.w,
child: Text(
Strings.mySpoc.toUpperCase(),
style: Theme.of(context).textTheme.headlineSmall,
),
),
],
),
Container(
width: 170.0.w,
height: 25.0.s,
color: AppColors.white,
child: CustomSearchDropDown(
hint: Strings.search,
menuMaxHeight: 200.0.s,
enabled: true,
value: selectedValue,
items: widget.dropdownItems,
onChanged: (value) {
setState(() {
if (value != null) {
selectedValue = value;
widget.callback!(value);
}
});
},
),
)
],
),
);

[AhmedLSayed9]

I need a minimal sample that I can run on my device.
Can you try using the latest 3.0.0-beta.16 version?

[AhmedLSayed9]

Test the following sample and try updating it to reproduce the issue:

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = [
    'A_Item1',
    'A_Item2',
    'A_Item3',
    'A_Item4',
    'B_Item1',
    'B_Item2',
    'B_Item3',
    'B_Item4',
  ];

  final valueListenable = ValueNotifier<String?>(null);
  final TextEditingController textEditingController = TextEditingController();

  @override
  void dispose() {
    textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Padding(
            padding: const EdgeInsets.only(bottom: 100),
            child: DropdownButtonHideUnderline(
              child: DropdownButton2<String>(
                isExpanded: true,
                hint: Text(
                  'Select Item',
                  style: TextStyle(
                    fontSize: 14,
                    color: Theme.of(context).hintColor,
                  ),
                ),
                items: items
                    .map((item) => DropdownItem(
                          value: item,
                          height: 40,
                          child: Text(
                            item,
                            style: const TextStyle(
                              fontSize: 14,
                            ),
                          ),
                        ))
                    .toList(),
                valueListenable: valueListenable,
                onChanged: (value) {
                  valueListenable.value = value;
                },
                buttonStyleData: const ButtonStyleData(
                  padding: EdgeInsets.symmetric(horizontal: 16),
                  height: 40,
                  width: 200,
                ),
                dropdownStyleData: const DropdownStyleData(
                  maxHeight: 200,
                ),
                dropdownSearchData: DropdownSearchData(
                  searchController: textEditingController,
                  searchBarWidgetHeight: 50,
                  searchBarWidget: Container(
                    height: 50,
                    padding: const EdgeInsets.only(
                      top: 8,
                      bottom: 4,
                      right: 8,
                      left: 8,
                    ),
                    child: TextFormField(
                      expands: true,
                      maxLines: null,
                      controller: textEditingController,
                      decoration: InputDecoration(
                        isDense: true,
                        contentPadding: const EdgeInsets.symmetric(
                          horizontal: 10,
                          vertical: 8,
                        ),
                        hintText: 'Search for an item...',
                        hintStyle: const TextStyle(fontSize: 12),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                        ),
                      ),
                    ),
                  ),
                  noResultsWidget: const Padding(
                    padding: EdgeInsets.all(8),
                    child: Text('No Item Found!'),
                  ),
                  searchMatchFn: (item, searchValue) {
                    return item.value.toString().contains(searchValue);
                  },
                ),
                //This to clear the search value when you close the menu
                onMenuStateChange: (isOpen) {
                  if (!isOpen) {
                    textEditingController.clear();
                  }
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}