Mixing FormGroup and InputGroup

[fredrikw]

Mixing FormGroup and InputGroup puts "mb-3" on the wrong div.

The code:

	<InputGroup>
		<FormGroup floating label="Dose volume">
			<Input bind:value={dose_volume} type="number" placeholder="0" />
		</FormGroup>
		<InputGroupText>ml</InputGroupText>
	</InputGroup>

Renders as:

<div class="input-group">
	<div class="mb-3 form-floating">
		<input class="form-control" type="number" name="" placeholder="0">
		<label>Dose volume</label>
	</div>
	<span class="input-group-text">ml</span>
</div>

This will give the following result, please note the hanging "ml" part:

It should instead render as (see https://getbootstrap.com/docs/5.3/forms/floating-labels/#input-groups):

<div class="input-group mb-3 ">
	<div class="form-floating">
		<input class="form-control" type="number" name="" placeholder="0">
		<label>Dose volume </label>
	</div>
	<span class="input-group-text">ml</span>
</div>

yielding: