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: