search

bestguy / sveltestrap

Bootstrap 4 & 5 components for Svelte
https://sveltestrap.js.org
MIT License
1.3k stars 183 forks source link

Feedback attribute breaks InputGroups #406

Open Meknassih opened 2 years ago

Meknassih commented 2 years ago

Hi, I just noticed that adding a feedback attribute for validation purposes to an Input breaks it from its suffix element in an InputGroup.

I have noticed that changing the order of the elements fixes the issue.

Generated HTML (broken) : 

<div class="input-group">
    <input id="totalWeight" class="form-control is-invalid" type="text" name="" placeholder="100">
    <div class="invalid-feedback">Ce champ est obligatoire</div>
    <span class="input-group-text">kg</span>
</div>

image

Working HTML (fixed by swapping div.invalid-feedback and span.input-group-text) : 

<div class="input-group">
    <input id="totalWeight" class="form-control is-invalid" type="text" name="" placeholder="100">
    <span class="input-group-text">kg</span>
    <div class="invalid-feedback">Ce champ est obligatoire</div>
</div>

image

bestguy commented 2 years ago

Ah thanks @Meknassih - hmm that's a tough one to fix since the feedback would be rendered by the Input, and can't split the elements like that. Am assuming this is the best workaround for now:

<InputGroup>
    <Input id="totalWeight" invalid placeholder="100" />
    <InputGroupText>kg</InputGroupText >
   <FormFeedback>Ce champ est obligatoire</FormFeedback>
</InputGroup >

I'll look and see if some better option, thanks for the heads up.