unable to set border color using searchFieldDecoration.

[colinbes]

Without overriding MultiDropdown's searchDecoration field it doesn't appear that border color is being correctly set. Defaults for SearchFieldDecoration has border being set to color Color(0xFFE0E0E0)) and focusedBorder set to grey. The non focus color is way too dark to be 0xFFE0E0 and looks closer to black.

As test I set border (as shown below) and it is definitely not RED.

Taking this a little further setting width as no impact on un-focus border but setting radius does work.

Appears that borderSide is being ignored (when I override or just using defaults - i.e. not specifying anything for searchDecoration.

searchDecoration: const SearchFieldDecoration(
        border: OutlineInputBorder(
          borderSide: BorderSide(width: 5, color: Color(0xFFFF0000)),
          borderRadius: BorderRadius.all(Radius.circular(0)), // this works and I can set to any radius as expected
        ),
        focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Color(0xFF00FF00)), // this works for when focused
            borderRadius: const BorderRadius.all(Radius.circular(24))), // this works for when focused
      ),

For giggles I also tried using UnderlineInputBorder as in

  searchDecoration: const SearchFieldDecoration(
        border: UnderlineInputBorder(
          borderSide: BorderSide(width: 5, color: Color(0xFFFF0000)),
          borderRadius: BorderRadius.all(Radius.circular(0)),
        ),
        focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Color(0xFF00FF00)), borderRadius: BorderRadius.all(Radius.circular(24))), // this works for when focused
      ),

[colinbes]

I think issue is the enabledBorder needs to be set and not just border as border is for shape and not setting color etc.

[colinbes]

As in section below in _buildDecoration

    return InputDecoration(
      enabled: widget.enabled,
      labelText: fieldDecoration.labelText,
      labelStyle: fieldDecoration.labelStyle,
      hintText: fieldDecoration.hintText,
      hintStyle: fieldDecoration.hintStyle,
      errorText: _formFieldKey.currentState?.errorText,
      filled: fieldDecoration.backgroundColor != null,
      fillColor: fieldDecoration.backgroundColor,
      border: fieldDecoration.border ?? border,
      enabledBorder: fieldDecoration.border ?? border,
      disabledBorder: fieldDecoration.disabledBorder,
      prefixIcon: prefixIcon,
      focusedBorder: fieldDecoration.focusedBorder ?? border,
      errorBorder: fieldDecoration.errorBorder,
      suffixIcon: _buildSuffixIcon(),
      contentPadding: fieldDecoration.padding,
    );

[colinbes]

As a workaround I used local Theme to set enabledBorder color.

    return Theme(
      data: Theme.of(context).copyWith(
        inputDecorationTheme: InputDecorationTheme(
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(width: 1, color: Theme.of(context).colorScheme.primaryContainer),
            borderRadius: const BorderRadius.all(Radius.circular(24)),
          ),
        ),
      ),
      child: MultiDropdown(
        // controller: controller,
        items: originOptions,
        searchEnabled: true,
        onSelectionChange: (options) {
          // final values = options.map((value) => value.label).toList();
          ref.read(selectedCategoriesProvider.notifier).updateOrigin(options);
        },
        maxSelections: 6,
        dropdownDecoration: DropdownStyles.dropdownDecoration(),
        chipDecoration: DropdownStyles.chipDecoration(context),
        fieldDecoration: DropdownStyles.fieldDecoration(context, "Select Origin"),
        searchDecoration: SearchFieldDecoration(
          border: const OutlineInputBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(24),
            ),
          ),
          focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Theme.of(context).colorScheme.primary),
              borderRadius: const BorderRadius.all(Radius.circular(24))),
          searchIcon: const Icon(Icons.search),
        ),
      ),
    );

[AntonioAEMartins]

Hi @colinbes,

I’ve been following the issue you're describing with MultiDropdown and the SearchFieldDecoration behavior. It seems like you’ve pointed out an interesting quirk with how the borderSide is being ignored when using defaults or even overriding with the searchDecoration. I understand that setting the borderRadius works, but the borderSide doesn't seem to reflect changes in width or color as expected for the un-focused state.

Just to clarify, did you notice any other instances where borderSide was respected (outside of focusedBorder), or does this issue seem isolated to this specific widget? Have you tested if manually setting the enabledBorder fixed the color issue when not focused, or was that workaround only applicable when modifying the local theme?

[AntonioAEMartins]

Hi @oi-narendra,

I noticed that the borderSide in SearchFieldDecoration doesn’t seem to reflect changes in color or width for the un-focused state unless enabledBorder is set directly. It seems like border only affects the shape, not the color or width.

Is this the intended behavior? Should users handle border color changes via global theme settings (ThemeData in main.dart), or should there be a more direct way to manage this within MultiDropdown?

[colinbes]

@AntonioAEMartins When you say "specific widget" are you referring to the multidown widget or one of its widgets? If for multidropdown widget then this is first time I have noticed this issue.

Flutter's comment on how on border, enabledBorder and focusBorder are a tad confusing to me. I don't see issue with setting global shape (ie, via border) but it docs state that only shape is used from border settings