Error with BS 5.3.0-aplha1

[apalfrey]

Error with BS 5.3.0-aplha1

[krystofbe]

this fork is compatible with boostrap 5.3.1: https://github.com/g10f/select2-bootstrap-5-theme.git

Edit: By working I mean that you need to compile the scss from the fork.

would love to see this merged into the main repo

[Jir4]

You can just patch it like this :

$s2bs5-border-color: $border-color;
@import "select2-bootstrap-5-theme/src/include-all";

[f1mishutka]

Replacing original color with red one is not a good solution.
Tracing $s2bs5-border-color assignments would get this chain:
$s2bs5-border-color = $form-select-border-color = $input-border-color = $border-color

So correct quick fix is to add this line before importing select2-bootstrap-5-theme:

$s2bs5-border-color: $border-color;

[LocalHeroPro]

"Quick fix"
Change in node_modules/select2-bootstrap-5-theme/src/_variables.scss from

$s2bs5-clear-icon:               str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color($s2bs5-border-color, 50%)}) !default;

to:

$s2bs5-clear-icon:               str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color(red, 50%)}) !default;

[larseggert]

@apalfrey any chance this could be fixed in a release?

[guillaumecardon]

Always broken in Bootstrap 5.3.2

[LocalHeroPro]

Same issue with:
bootstrap: 5.3.0-alpha3
select2: 4.1.0-rc.0
bootstrap-5-theme: 1.3.0

[dariocarbone]

Same here with 5.3.0 release, could you please publish a new release with the minor fix suggested by @LocalHeroPro (it works like a charm) ?

[madman-81]

I just ran into this issue myself. Instead of editing the package files, I set the variable myself before including the package:

$s2bs5-border-color: red;
@import '~select2-bootstrap-5-theme';

[BSarmady]

With bootstrap 5.3.1 and select2 4.1.0-rc.0 this is completely broken

$('#edtText').select2({
    theme: "bootstrap-5",
    width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
    placeholder: $(this).data('placeholder'),
});

<div class="col-2">
    <input type="text" class="form-control" value="text" />
    <div class="debug-border"></div>
    <select type="text" class="form-control debug-border" id="edtText"></select>
    <div class="debug-border"></div>
</div>

(debug-border) is just a dashed pink border to show boundaries of the control and code is from sample in Single select from document

attempted fixing css with replacing background-color:white with background-color:var(--bs-secondary-bg); and it looks better but the width is still broken and select is hidden too