Fixes for select2 rendering, ensuring the radius is set and unset in the right places

public/css/custom.css

@@ -1,9 +1,18 @@
-/** ensure our userpassword has select is next to the password input */
+/* ensure our password type select box shrinks and has the full boarder */
-attribute#userpassword .select2-container--bootstrap-5 .select2-selection {
+attribute#userpassword .input-group > .form-select  {
-	font-size: inherit;
+	flex-grow: 0;
 	width: 9em;
 	border: var(--bs-gray-500) 1px solid;
-	background-color: #f0f0f0;
+	z-index: 2;
+}
+
+attribute#userpassword .input-group .select2-container--bootstrap-5 {
+	flex-grow: 0;
+	margin-bottom: 0.25em !important;
+}
+
+attribute#userpassword .input-group > .select2-container--bootstrap-5 .select2-selection {
+	background-color: #eef2f4;
 }
 
 /* render the structural inside the input box */
@@ -14,20 +23,6 @@ attribute#objectclass .input-group-end:not(input.form-control) {
 	z-index: 5;
 }
 
-/* select forms that have nothing next to them */
-.select-group:first-child .select2-container--bootstrap-5 .select2-selection {
-	border-radius: 4px !important;
-}
-
-.input-group:first-child:not(.select-group):not(:last-child) .select2-container--bootstrap-5 .select2-selection {
-	border-bottom-right-radius: unset;
-	border-top-right-radius: unset;
-}
-
-.select2-container .select2-selection--single .select2-selection__rendered {
-	font-size: 0.88em;
-}
-
 input.form-control.input-group-end {
 	border-bottom-right-radius: 4px !important;
 	border-top-right-radius: 4px !important;

public/css/fixes.css

@@ -215,9 +215,17 @@ pre code .line::before {
 }
 
 /** select2 rendering fixes */
+.select2-container--bootstrap-5 .select2-selection {
+	border: var(--bs-gray-500) 1px solid;
+}
+
+/* Selection rendered size */
+.select2-container .select2-selection--single .select2-selection__rendered {
+	font-size: 95%;
+}
+
 /* The opened input box */
 .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
-	line-height: 1.0;
 	border: 1px solid #aaa;
 }
 
@@ -226,23 +234,21 @@ pre code .line::before {
 	font-size: 95%;
 }
 
-select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear, .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
+/* Place holder text */
-	width: 0.5rem;
-	height: 0.5rem;
-}
-
 .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
-	line-height: 1.0;
 	font-size: 90%;
 }
 
+/* Group options title rendering */
 .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
 	color: #212529;
 	font-weight: 800;
 }
 
+/* Multiple selected items rendering */
 .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
 	padding: 0.25em 0.45em;
+	font-size: 90%;
 }
 
 /* Remove the shadow outline on an opened box */

resources/views/components/attribute.blade.php

@@ -1,6 +1,5 @@
 <!-- $o=Attribute::class -->
 <x-attribute.layout :edit="$edit=($edit ?? FALSE)" :new="$new=($new ?? FALSE)" :o="$o" :template="$template">
-	<div class="col-12">
 	<div class="tab-content">
 		@foreach($o->langtags as $langtag)
 			<span @class(['tab-pane','active'=>$loop->index === 0]) id="langtag-{{ $o->name_lc }}-{{ $langtag }}" role="tabpanel">
@@ -44,7 +43,6 @@
 			</span>
 		@endif
 	</div>
-	</div>
 </x-attribute.layout>
 
 @if($new && ($x=$template?->onChange($o->name))?->count())

resources/views/components/attribute/password.blade.php

@@ -4,7 +4,7 @@
 		@foreach(($o->tagValues($langtag)->count() ? $o->tagValues($langtag) : [$langtag => NULL]) as $key => $value)
 			@if($edit)
 				<div class="input-group has-validation">
-					<x-form.select id="userpassword_hash_{{$loop->index}}{{$template?->name ?: ''}}" name="_userpassword_hash[{{ $langtag }}][]" :value="old('_userpassword_hash.'.$langtag.'.0',$o->hash($new ? '' : ($value ?? ''))->id())" :options="$helpers" allowclear="false" :disabled="! $new"/>
+						<x-select class="mb-1" id="userpassword_hash_{{$loop->index}}{{$template?->name ?: ''}}" name="_userpassword_hash[{{ $langtag }}][]" :value="old('_userpassword_hash.'.$langtag.'.0',$o->hash($new ? '' : ($value ?? ''))->id())" :options="$helpers" allowclear="false" :disabled="! $new"/>
 					<input type="password" @class(['form-control','is-invalid'=>($e=$errors->get($o->name_lc.'.'.$langtag.'.'.$loop->index)),'mb-1','border-focus'=>! $o->tagValuesOld($langtag)->contains($value),'bg-success-subtle'=>$updated]) name="{{ $o->name_lc }}[{{ $langtag }}][]" value="{{ Arr::get(old($o->name_lc),$langtag.'.'.$loop->index,$value ? md5($value) : '') }}" @readonly(! $new)>
 
 					<div class="invalid-feedback pb-2">

resources/views/components/attribute/template/select.blade.php

@@ -3,7 +3,6 @@
 	@foreach($o->langtags as $langtag)
 		@foreach(($o->tagValues($langtag)->count() ? $o->tagValues($langtag) : [$langtag => NULL]) as $key => $value)
 			@if($edit)
-				<div class="select-group">
 				<x-form.select
 					@class(['is-invalid'=>($e=$errors->get($o->name_lc.'.'.$langtag.'.'.$loop->index)),'mb-1','border-focus'=>! $o->tagValuesOld($langtag)->contains($value)])
 					id="{{ $o->name_lc }}_{{$loop->index}}{{$template?->name ?: ''}}"
@@ -19,7 +18,6 @@
 						{{ join('|',$e) }}
 					@endif
 				</div>
-				</div>
 			@else
 				{{ $o->render_item_old($langtag.'.'.$key) }}
 			@endif

resources/views/components/form/select.blade.php

@@ -1,78 +1,7 @@
-<x-form.base {{ $attributes }}>
 @isset($name)
 	<input type="hidden" id="{{ $id ?? $name }}_disabled" name="{{ $name }}" value="" disabled>
 @endisset
 
-	<select class="form-select @error($old ?? $id ?? $name) is-invalid @enderror" id="{{ $id ?? $name}}" @isset($name)name="{{ $name }}"@endisset @required($required ?? FALSE) @disabled($disabled ?? FALSE)>
+<div class="input-group">
-		@if((empty($value) && ! empty($options)) || isset($addnew))
+	<x-select :id="$id ?? NULL" :name="$name ?? NULL" :options="$options ?? []" :value="$value ?? NULL" :class="$class ?? NULL"/>
-			<option value=""></option>
+</div>
-
-			@isset($addnew)
-				<option value="new">{{ $addnew ?: 'Add New' }}</option>
-			@endisset
-		@endif
-		@isset($options)
-			@empty($groupby)
-				@foreach($options as $option)
-					@continue(! Arr::get($option,'value'))
-					<option value="{{ Arr::get($option,'id') }}" @selected(Arr::get($option,'id') == collect(old())->dot()->get(isset($old) ? $old.'.0' : ($id ?? $name),$value ?? ''))>{{ Arr::get($option,'value') }}</option>
-				@endforeach
-
-			@else
-				@foreach($options->groupBy($groupby) as $group)
-					<optgroup label="{{ Arr::get($group->first(),$groupby) }}">
-						@foreach($group as $option)
-							@continue(! Arr::get($option,'value'))
-							<option value="{{ Arr::get($option,'id') }}" @selected(Arr::get($option,'id') == collect(old())->dot()->get(isset($old) ? $old.'.0' : ($id ?? $name),$value ?? ''))>{{ Arr::get($option,'value') }}</option>
-						@endforeach
-					</optgroup>
-				@endforeach
-			@endempty
-		@endisset
-	</select>
-</x-form.base>
-
-@section('page-scripts')
-	<script type="text/javascript">
-		// Select doesnt support read only so we'll use disable and a new field
-		@isset($name)
-			function {{$id ?? $name}}_readonly(on) {
-				if (on) {
-					$('#{{ $name }}').prop('disabled',true);
-					$('#{{ $name }}_disabled').prop('disabled',false).val($('#{{ $name }}').val());
-
-				} else {
-					$('#{{ $name }}').prop('disabled',false);
-					$('#{{ $name }}_disabled').prop('disabled',true);
-				}
-			}
-		@endisset
-
-		$(document).ready(function() {
-			$('#{{ $id ?? $name }}').select2({
-				theme: 'bootstrap-5',
-				dropdownAutoWidth: true,
-				width: 'style',
-				allowClear: {{ $allowclear ?? 'false' }},
-				placeholder: '{{ $placeholder ?? '' }}',
-				multiple: {{ $multiple ?? 'false' }},
-				@isset($addvalues)
-					tags: true,
-				@endisset
-			});
-
-			@if(isset($multiple) && (! $multiple))
-				$('#{{ $id ?? $name }}').val(' ');
-				$('#{{ $id ?? $name }}').trigger('change');
-			@endif
-
-			@isset($options)
-				@if(($autoselect ?? FALSE) && $options->count() === 1)
-					$('#{{ $id ?? $name }}')
-						.val('{{ $options->first()['id'] }}')
-						.trigger("change")
-				@endif
-			@endisset
-		});
-	</script>
-@append

resources/views/components/select.blade.php

@@ -0,0 +1,72 @@
+<select class="form-select {{ $class }} @error($old ?? $id ?? $name) is-invalid @enderror" id="{{ $id ?? $name}}" @isset($name)name="{{ $name }}"@endisset @required($required ?? FALSE) @disabled($disabled ?? FALSE)>
+	@if((empty($value) && ! empty($options)) || isset($addnew))
+		<option value=""></option>
+
+		@isset($addnew)
+			<option value="new">{{ $addnew ?: 'Add New' }}</option>
+		@endisset
+	@endif
+	@isset($options)
+		@empty($groupby)
+			@foreach($options as $option)
+				@continue(! Arr::get($option,'value'))
+				<option value="{{ Arr::get($option,'id') }}" @selected(Arr::get($option,'id') == collect(old())->dot()->get(isset($old) ? $old.'.0' : ($id ?? $name),$value ?? ''))>{{ Arr::get($option,'value') }}</option>
+			@endforeach
+
+		@else
+			@foreach($options->groupBy($groupby) as $group)
+				<optgroup label="{{ Arr::get($group->first(),$groupby) }}">
+					@foreach($group as $option)
+						@continue(! Arr::get($option,'value'))
+						<option value="{{ Arr::get($option,'id') }}" @selected(Arr::get($option,'id') == collect(old())->dot()->get(isset($old) ? $old.'.0' : ($id ?? $name),$value ?? ''))>{{ Arr::get($option,'value') }}</option>
+					@endforeach
+				</optgroup>
+			@endforeach
+		@endempty
+	@endisset
+</select>
+
+@section('page-scripts')
+	<script type="text/javascript">
+		// Select doesnt support read only so we'll use disable and a new field
+		@isset($name)
+		function {{$id ?? $name}}_readonly(on) {
+			if (on) {
+				$('#{{ $name }}').prop('disabled',true);
+				$('#{{ $name }}_disabled').prop('disabled',false).val($('#{{ $name }}').val());
+
+			} else {
+				$('#{{ $name }}').prop('disabled',false);
+				$('#{{ $name }}_disabled').prop('disabled',true);
+			}
+		}
+		@endisset
+
+		$(document).ready(function() {
+			$('#{{ $id ?? $name }}').select2({
+				theme: 'bootstrap-5',
+				dropdownAutoWidth: false,
+				width: 'style',
+				allowClear: {{ $allowclear ?? 'false' }},
+				placeholder: '{{ $placeholder ?? '' }}',
+				multiple: {{ $multiple ?? 'false' }},
+				@isset($addvalues)
+				tags: true,
+				@endisset
+			});
+
+			@if(isset($multiple) && (! $multiple))
+			$('#{{ $id ?? $name }}').val(' ');
+			$('#{{ $id ?? $name }}').trigger('change');
+			@endif
+
+			@isset($options)
+			@if(($autoselect ?? FALSE) && $options->count() === 1)
+			$('#{{ $id ?? $name }}')
+				.val('{{ $options->first()['id'] }}')
+				.trigger("change")
+			@endif
+			@endisset
+		});
+	</script>
+@append